App端自定义对话框不能直接用uni.showModal，因其为系统级原生弹窗，样式和交互不可控，iOS/Android表现不一致，且存在遮罩穿透、动画卡顿、z-index失效等问题；应使用view+animation自建Vue组件，严格处理fixed定位、touchmove拦截、软键盘顶起三大App特有问题。
uni-app App端自定义对话框为什么不能直接用 uni.showModal
因为 uni.showModal 是系统级原生弹窗，样式和交互完全不可控——iOS 和 Android 表现不一致、无法修改按钮文字颜色、不能加图标、不能嵌入输入框或自定义内容区域。App 端（尤其是 iOS）还常出现遮罩层点击穿透、动画卡顿、z-index 失效等问题。
真正可控的方式是：自己写一个基于 view + animation 的 Vue 组件，用 v-if 控制显隐，用 position: fixed 定位，手动管理遮罩层与内容层的层级关系。
封装时必须处理的三个 App 端特有问题
App 端（尤其 iOS）对 fixed 定位、transform 动画、触摸事件拦截更敏感，不处理会直接导致弹窗错位、点不到按钮、背景滚动无法禁止。
- 遮罩层必须加
touchmove.prevent并设置catchtouchmove（H5 可省，App 必须） - 弹窗容器需添加
style="position: fixed; top: 0; left: 0; width: 100%; height: 100%;"，且不能依赖父容器定位 - iOS 下
input聚焦时软键盘顶起页面，导致弹窗偏移——需监听keyboardheightchange事件动态调整bottom值（仅 App 支持）
基础组件结构与关键 props 设计
一个最小可用的 App 自定义弹窗组件，核心只暴露 4 个 props：visible（控制显隐）、title、content、showCancel。其他如按钮文字、回调函数、动画类型等都应作为可选参数传入，避免组件内部硬编码。
示例片段（非完整代码，仅说明结构）：
<template>
<view v-if="visible" class="dialog-mask" @touchmove.prevent>
<view class="dialog-box" :animation="animationData">
<text class="dialog-title">{{ title }}</text>
<text class="dialog-content">{{ content }}</text>
<view class="dialog-btns">
<button v-if="showCancel" @tap="onCancel">{{ cancelText }}</button>
<button @tap="onConfirm">{{ confirmText }}</button>
</view>
</view>
</view>
</template>
注意：@touchmove.prevent 必须写在遮罩层上；animationData 由 uni.createAnimation 生成，避免用 CSS transition（App 端兼容性差）。
在 App.vue 或 pages.json 中禁用页面滚动的关键配置
即使弹窗自身加了遮罩，如果当前页面本身可滚动（比如长列表），用户仍可能滑动背景内容。这不是弹窗组件的问题，而是页面级行为。
必须在弹窗显示时，临时关闭页面滚动能力：
- 在
onShow钩子中调用uni.pageScrollTo({ scrollTop: 0, duration: 0 })强制归位 - 给页面根容器（如
<scroll-view></scroll-view>）绑定scroll-y并通过 data 控制开关；或直接在弹窗打开时给body加style="overflow: hidden;"（App 端需用plus.webview.currentWebview().setStyle修改） - 更稳妥的做法：在弹窗组件
mounted时执行plus.webview.currentWebview().setStyle({ scrollIndicator: 'none' })，隐藏滚动条并抑制惯性滚动
这个动作容易被忽略，但却是 App 端弹窗体验是否“真模态”的分水岭。
