全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[天津最好的seo公司哪家好]小程序:防止点击遮罩层后遮罩层下面也反应的解

  

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

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

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

  那如何解决这个问题呢 □◇?

  网上给出了几种方法
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 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,[濮阳seo公司咨询久澳]4种移动端适配方法,用 hidden 更好,[天津最好的seo公司哪家好]如果在运行时条件不大可能改变则 wx:if 较好。可以参考官方文档的说明▼□▲●。

  

<!-- 遮罩层 --><▲△;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

  相关推荐□◁:

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

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

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

  以上就是小程序:防止点击遮罩层后遮罩层下面也反应的解决方法的详细内容,更多请关注久澳传媒编程栏目其它相关文章▽■☆◆!

[天津最好的seo公司哪家好]小程序:防止点击遮罩层后遮罩层下面也反应的解决方法

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。