uni-app怎么实现弹窗 uni-app自定义模态框遮罩层【代码】

uni-app自定义弹窗遮罩层不跟随滚动的正确做法是：避免使用position:fixed，改用position:absolute+100vw/100vh，H5端加transform:translateZ(0)硬件加速，App端需将遮罩挂载到page外层。uni-app 弹窗遮罩层不跟随滚动怎么办遮罩层固定在视口，但内容区域滚动时遮罩层跟着动——这是 position: fixed 在 iOS WebView 和部分安卓 WebView 中失效导致的。uni-app 的 uni.showModal 等原生弹窗不支持自定义样式，所以必须手写组件，而手写时容易忽略 WebView 渲染特性。别用 position: fixed 直接套在 view 上：H5 端在 iOS 下会“粘”在页面滚动位置，不是视口中心正确做法是把遮罩层和弹窗都放在 page 根节点下（用 uni.createSelectorQuery() 或 uni.getSystemInfoSync() 动态计算高度），或改用 position: absolute + top: 0; left: 0; width: 100vw; height: 100vh;H5 端可加 transform: translateZ(0) 强制硬件加速，避免遮罩层闪烁或错位App 端（iOS）需注意：如果页面用了 scroll-view，遮罩层必须挂载到 page 外层（如通过 uni.$emit + 全局插槽），否则会被 scroll-view 的 overflow 隐藏uni-app 自定义弹窗怎么阻止背景点击穿透点了遮罩层没关闭、或者点到后面按钮触发了事件——本质是 touch 事件冒泡或 catchtouchmove 没写全。uni-app 的事件捕获比小程序更弱，尤其在 H5 端。遮罩层必须同时写 catchtouchmove 和 catchtap（不能只写 bindtap），否则 iOS 下快速点击可能穿透弹窗内容区要加 catchtouchmove，防止内部滚动时触发背景滚动（特别是 Android 微信内置浏览器）别依赖 pointer-events: none 控制交互：H5 端兼容性差，App 端部分版本不识别简单方案：遮罩层 z-index 设为 9999，弹窗设为 10000，并确保父容器没设 overflow: hidden 或 transform（会创建新层叠上下文，导致 z-index 失效）uni-app 弹窗动画卡顿或闪一下再出现动画靠 transition 或 animation 实现时，H5 端常见卡顿，App 端某些安卓机直接无动画——根本原因是 uni-app 的 view 组件在非原生渲染路径下，CSS 动画帧率不稳定。 arXiv Xplorer ArXiv 语义搜索引擎，帮您快速轻松的查找，保存和下载arXiv文章。