小程序:防止点击遮罩层后遮罩层下面也反应的解决方法

不言
Lepaskan: 2018-08-11 17:26:14
asal
8231 orang telah melayarinya

本篇文章给大家带来的内容是关于小程序:防止点击遮罩层后遮罩层下面也反应的解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

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

那如何解决这个问题呢 ?

网上给出了几种方法
1 . 在遮罩层 view 中添加 catchtouchmove 点击事件。因为 catch 事件绑定可以阻止冒泡事件向上冒泡。

<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showMask}}"/>
Salin selepas log masuk

2 . 给底层页面动态添加 position:fixed;

<view style="{{hasMask?&#39;position:fixed;&#39;:&#39;&#39;}}>
    小程序弹出层点击穿透问题
    <button bindtap=&#39;showMask&#39;>弹出遮罩层</button>
</view>
Salin selepas log masuk

通过实践,网上说的前面两种是不可行的,对于第一种,不知是不是我姿势不对!第二种纯属坑蒙拐骗!或者说他的项目能行是机缘巧合。

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

3 . 使用 wx:if 和 wx:else 或 hidden 控制显示。当弹出遮罩层时,不显示组件。
至于使用 wx:if 还是 hidden,一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。可以参考官方文档的说明。

<!-- 遮罩层  --><view class="mask" wx:if="{{hasMask}}"/><view wx:else=&#39;{{!hasMask}}&#39; style=&#39;text-align:center;margin-top:50px;&#39;>
    <!-- 这里是不希望被点击的组件 …… -->
  <button bindtap="showMask" type=&#39;primary&#39; style=&#39;width:50%;&#39; >点我弹窗</button></view>
Salin selepas log masuk

这里简单的说一下遮罩层的样式

 /* 遮罩层 */.mask{  width: 100%;  height: 100%;  background: #000;  opacity: 0.5;  z-index: 9000;}
Salin selepas log masuk

问题的解决方案千百种,多换角度会有意想不到的收获。

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

相关推荐:

微信小程序实例:分享给一个人还是分享到群的判断代码

微信小程序在上传图片时如何限制大小(附代码)

小程序:如何动态增加删除JSON对象数组(附代码)


Atas ialah kandungan terperinci 小程序:防止点击遮罩层后遮罩层下面也反应的解决方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan