最近写的小程序有个需求就是点击加入购物车或者立即购买会弹出一个自定义的弹窗,需求写完后发现上下滑动弹窗底部的页面也跟着滑动,找了好长时间原因,最后找度娘才发现是事件冒泡的原因所致。
WX20180417-222859@2x.png
WX20180417-223242@2x.png
看看我们的上下滑动符合小程序的哪个事件,很显然属于第二种touchmove,
WX20180417-224624@2x.png
官方也说了阻止冒泡的方法就是加前缀catch,如下图
WX20180417-225439@2x.png
所以我们只要在弹层标签上加上catchtouchmove事件就行。
最后经过测试发现catchtouchmove只要等于非空字符(空格也行)就可以禁止弹层下面的页面滚动
<!--弹窗-->
<view class="commodity_screen" catchtouchmove="true" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
网友评论