uni-app怎么实现App端内的自定义对话框 uni-app弹窗组件封装方法 代码

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-y 并通过 data 控制开关；或直接在弹窗打开时给 body 加 style="overflow: hidden;"（App 端需用 plus.webview.currentWebview().setStyle 修改）
• 更稳妥的做法：在弹窗组件 mounted 时执行 plus.webview.currentWebview().setStyle({ scrollIndicator: 'none' })，隐藏滚动条并抑制惯性滚动

这个动作容易被忽略，但却是 App 端弹窗体验是否“真模态”的分水岭。