小程序遮罩層防止滾動穿透（真機測試才能夠）

1、彈出層顯示時，彈出層上的內容不須要進行滾動： 1.在彈出層模塊上添加 catchtouchmove 事件

aa class="maskModal" wx:if="{{maskShow}}" catchtouchmove = ’forbidScroll’> 這個模塊是遮罩層模塊 aa aa  class="closeMask">取消 aa

Page({
複製代碼

   forbidScroll:function(){} })

2.在彈出層模塊上添加 catchtouchmove=’true’ (推薦) class="maskModal" wx:if="{{maskShow}}" catchtouchmove=’true’

2、彈出層顯示時，彈出層上的內容須要進行滾動：

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:   Page({     data:{       forbidScroll:false,       maskShow:false     },     showPopups:function(){       this.setData({         forbidScroll:true,         maskShow:true       })     }  })