小程序遮罩层防止滚动穿透(真机测试才可以)

1,531 阅读1分钟

一、弹出层显示时,弹出层上的内容不需要进行滚动:

1.在弹出层模块上添加 catchtouchmove 事件
    <view  class="maskModal" wx:if="{{maskShow}}" catchtouchmove = ’forbidScroll’></view>
    Page({
&emsp;&emsp;    forbidScroll:function(){}
    })
    
2.在弹出层模块上添加 catchtouchmove=’true’ (推荐)
    class="maskModal" wx:if="{{maskShow}}" catchtouchmove=’true’

二、弹出层显示时,弹出层上的内容需要进行滚动:

wxml:
<view  class=‘{{forbidScroll ? "forbidScroll" : ""}}‘>
    <view class="maskModal" wx:if="{{maskShow}}" catchtouchmove = ’forbidScroll’>
        <text>这个模块是遮罩层模块</text>   
        <view style="width:80%;height:300rpx;overflow:auto">
            <text>弹出层内容模块</text>   
            <view style="width:100%;height:600rpx;"></view>
        </view>
&emsp;&emsp;     <view class="closeMask">取消</view>&emsp;
     </view>

    <view bindtap="showPopups">点击我显示弹出层</view>
&emsp;      &emsp;<view class="width:100%;height:300rpx;">底部内容区域</view>
</view>

wxss:
    .forbidScroll{position:fixed;left:0;right:0;top:0;bottom:0;overflow:hidden;}
    .maskModal{position:fixed;left:0;right:0;top:0;bottom:0;}
    
js:
data(){
 return{
    forbidScroll:true,
    maskShow:false,
 }
},
methods:{
    showPoups:function(){
        this.setData({
            forbidScorll:true,
            maskShow:true
        })
    }
}