【bug】u-popup里套u-action-sheet,同时出现时两层遮罩层叠加在底层(第二层遮罩层无效果,第一层遮罩层颜色变深)

问题:图中画红框的地方没有遮罩层,或者说第一层的遮罩层颜色加重,似乎与第二层遮罩层叠加:

在项目中可能会出现u-popup未关闭又打开了一个u-action-sheet后,同时出现时两个遮罩层都叠加在第一层u-popup里的情况,可以在u-popup里添加 zIndex="10070" 属性(参考uview官方文档,u-popup的默认层级为10075)。

原理是降低底层元素的遮罩层层级,得以让上层元素的遮罩层默认层级大于底层元素层级,当两个遮罩层层级错开时即可分别作用于两个弹出框。通俗一点来说就是分开两个遮罩层的层级关系,避免重叠。

 这个问题就解决了。

bug可能千篇一律,但原理一定在附近。

如果遮罩层问题依然没有解决,可以找找定位元素的原因(参考我的其他博客:el-dialog弹出时额外多了一层遮罩层_el-dialog遮罩层_光生_H的优快云博客

如果对层级的概念不太熟悉的话可以去多了解了解层叠上下文哦,欢迎留言讨论。

### 如何在 uView2 中实现嵌套遮罩层 #### 解决方案概述 为了实现在 `u-view` 的 `u-popup` 组件内部再次弹另一个遮罩层并形成嵌套效果,可以采取以下措施: 1. **调整层级关系** 需要确保外层和内层的弹窗组件具有不同的 `z-index` 值,以便它们能够正确显示而不互相干扰。根据已有信息[^1],可以通过设置 `zIndex` 属性来控制弹窗的层级。 2. **防止滑动穿透问题** 如果存在滑动穿透现象,则需通过事件修饰符阻止默认行为。具体做法是在外层和内层弹窗上分别绑定 `@touchmove.native.stop.prevent="stopTouchMove"` 方法[^2]。 3. **处理遮罩关闭逻辑冲突** 对于可能现的点击遮罩层弹窗“反复横跳”的情况,应仔细检查 `closeOnClickOverlay` 和其他相关属性配置是否合理,并确保回调函数执行无误[^4]。 以下是完整的解决方案代码示例: ```html <template> <view> <!-- 外层 popup --> <u-popup :show="outerPopupShow" mode="center" @close="handleOuterClose" @open="handleOuterOpen" zIndex="10080" closeOnClickOverlay=true @touchmove.native.stop.prevent="stopTouchMove"> <view class="outer-content">这是外层弹窗</view> <!-- 内层 action-sheet --> <u-action-sheet :show="innerActionSheetShow" title="请选择操作项" :list="actionList" @close="handleInnerClose" cancelText="取消"></u-action-sheet> </u-popup> </view> </template> <script> export default { data() { return { outerPopupShow: false, innerActionSheetShow: false, actionList: [ { text: '选项一' }, { text: '选项二' } ] }; }, methods: { handleOuterOpen() { console.log('外层弹窗已打开'); }, handleOuterClose() { this.outerPopupShow = false; console.log('外层弹窗已关闭'); }, openInnerActionSheet() { this.innerActionSheetShow = true; }, handleInnerClose(e) { this.innerActionSheetShow = e.show ? true : false; console.log('内层 Action Sheet 已关闭', e); }, stopTouchMove() { return false; } } }; </script> <style scoped> .outer-content { padding: 20px; background-color: white; } </style> ``` --- #### 关键点解析 1. **外层 Popup 设置** - 使用 `mode="center"` 定义居中展示模式。 - 添加 `zIndex="10080"` 来提升其相对于默认值 (如 10075)[^1] 的优先级。 2. **内层 Action-Sheet 调整** - 将 `u-action-sheet` 放置在外层 `u-popup` 内部作为子组件。 - 确保两者之间的交互不会相互影响。 3. **滑动穿透防护** - 在模板标签中加入 `@touchmove.native.stop.prevent="stopTouchMove"` 方法调用来抑制不必要的滚动动作。 4. **遮罩层点击异常修复** - 明确设定 `closeOnClickOverlay=true` 并验证实际运行表现是否符合预期。 --- #### 注意事项 - 若目标平台涉及 iOS 设备,请额外留意可能存在的兼容性隐患[^5]。 - 动态计算各组件间的相对位置以及透明度变化等因素也可能有助于优化视觉体验。 --- ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值