最近在做自定义弹窗,不免会使用到遮罩层或者说蒙层。

但是关键是,有遮罩层后,再点击遮罩层下的组件,依然会产生点击事件。

那如何解决这个问题呢 ?

网上给出了几种方法
1 . 在遮罩层 view 中添加 catchtouchmove 点击事件。因为 catch 事件绑定可以阻止冒泡事件向上冒泡。
<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showMask}}"/>
2 . 给底层页面动态添加 position:fixed;
<view style="{{hasMask?'position:fixed;':''}}> 小程序弹出层点击穿透问题 <button
bindtap='showMask'>弹出遮罩层</button> </view>
通过实践,网上说的前面两种是不可行的,对于第一种,不知是不是我姿势不对!第二种纯属坑蒙拐骗!或者说他的项目能行是机缘巧合。

下面介绍的这种方法倒是非常不错。

3 . 使用 wx:if 和 wx:else 或 hidden 控制显示。当弹出遮罩层时,不显示组件。
至于使用 wx:if 还是 hidden,一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用
hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。可以参考官方文档
<https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/conditional.html>
的说明。
<!-- 遮罩层 --> <view class="mask" wx:if="{{hasMask}}"/> <view wx:else=
'{{!hasMask}}' style='text-align:center;margin-top:50px;'> <!-- 这里是不希望被点击的组件 ……
--> <button bindtap="showMask" type='primary' style='width:50%;' >点我弹窗</button>
</view>
这里简单的说一下遮罩层的样式
/* 遮罩层 */ .mask{ width: 100%; height: 100%; background: #000; opacity: 0.5;
z-index: 9000; }
问题的解决方案千百种,多换角度会有意想不到的收获。

项目地址:https://github.com/MoTec95/CustomPop
<https://github.com/MoTec95/CustomPop>


关注公众号,一起成长、一起 To Be Better

友情链接
KaDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:[email protected]
QQ群:637538335
关注微信