微信小程序自定義彈窗時,禁止彈窗下面頁面滾動的方法

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


WX20180417-222859@2x.png

WX20180417-223242@2x.png

看看我們的上下滑動符合小程序的哪個事件,很顯然屬于第二種touchmove,


WX20180417-224624@2x.png

官方也說了阻止冒泡的方法就是加前綴catch,如下圖
WX20180417-225439@2x.png

所以我們只要在彈層標(biāo)簽上加上catchtouchmove事件就行。

最后經(jīng)過測試發(fā)現(xiàn)catchtouchmove只要等于非空字符(空格也行)就可以禁止彈層下面的頁面滾動

<!--彈窗-->
<view class="commodity_screen" catchtouchmove="true" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容