美文网首页微信小程序
微信小程序自定义弹窗时,禁止弹窗下面页面滚动的方法

微信小程序自定义弹窗时,禁止弹窗下面页面滚动的方法

作者: robotlee8 | 来源:发表于2018-04-17 22:58 被阅读44次

    最近写的小程序有个需求就是点击加入购物车或者立即购买会弹出一个自定义的弹窗,需求写完后发现上下滑动弹窗底部的页面也跟着滑动,找了好长时间原因,最后找度娘才发现是事件冒泡的原因所致。


    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>
    

    相关文章

      网友评论

      • 神木惊蛰::-O终于找到这个问题的解决方案了
      • IT人故事会:贵在坚持,么么哒!我也是个爱写文章的人

      本文标题:微信小程序自定义弹窗时,禁止弹窗下面页面滚动的方法

      本文链接:https://www.haomeiwen.com/subject/socmkftx.html