Skip to content
微信小程序禁止页面滑动

当我们在做弹窗这个需求时,有时候我们不希望用户还能再蒙层上面还能滑动,也就是要在蒙层时阻止滑动,实现方式如下:

html
<view style="background-color: pink;">
    <view style="height: 10vh;">111111</view>
    <view style="height: 10vh;">222222</view>
    <view style="height: 10vh;">333333</view>
    <view style="height: 10vh;">444444</view>
    <view style="height: 10vh;">555555</view>
    <view style="height: 10vh;">666666</view>
    <view style="height: 10vh;">777777</view>
    <view style="height: 10vh;">888888</view>
    <view style="height: 10vh;">999999</view>
    <view style="height: 10vh;">101010</view>
    <view style="height: 10vh;">111111</view>
    <view style="height: 10vh;">121212</view>
    <view style="height: 10vh;">131313</view>
    <view style="height: 10vh;">141414</view>
    <view style="height: 10vh;">151515</view>
    <view style="height: 10vh;">161616</view>
    <view style="height: 10vh;">171717</view>
    <view style="height: 10vh;">181818</view>
    <view style="height: 10vh;">191919</view>
    <view style="height: 10vh;">202020</view>
    <view style="height: 10vh;">212121</view>
    <view style="height: 10vh;">222222</view>
    <view style="height: 10vh;">232323</view>
    <view style="height: 10vh;">242424</view>
</view>
<!-- 蒙层,加上catchtouchmove='true' 这个属性,则该view标签上面滑动就会失效,不过有的开发者工具不好使,建议真机查看效果 -->
<view catchtouchmove='true' style="position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: #00000080;"></view>