最近寫的小程序有個需求就是點擊加入購物車或者立即購買會彈出一個自定義的彈窗,需求寫完后發(fā)現(xiàn)上下滑動彈窗底部的頁面也跟著滑動避乏,找了好長時間原因,最后找度娘才發(fā)現(xiàn)是事件冒泡的原因所致甘桑。
WX20180417-222859@2x.png
WX20180417-223242@2x.png
看看我們的上下滑動符合小程序的哪個事件拍皮,很顯然屬于第二種touchmove歹叮,
WX20180417-224624@2x.png
官方也說了阻止冒泡的方法就是加前綴catch,如下圖
WX20180417-225439@2x.png
所以我們只要在彈層標簽上加上catchtouchmove事件就行春缕。
最后經(jīng)過測試發(fā)現(xiàn)catchtouchmove只要等于非空字符(空格也行)就可以禁止彈層下面的頁面滾動
<!--彈窗-->
<view class="commodity_screen" catchtouchmove="true" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>