最近寫的小程序有個需求就是點擊加入購物車或者立即購買會彈出一個自定義的彈窗,需求寫完后發現上下滑動彈窗底部的頁面也跟著滑動,找了好長時間原因,最后找度娘才發現是事件冒泡的原因所致。
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>