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

uni-app自定义弹窗遮罩层不跟随滚动的正确做法是避免使用position:fixed改用position:absolute100vw/100vhH5端加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文章。