解决小程序的遮罩层滚动穿透

最新推荐文章于 2024-09-24 16:01:10 发布

骑猪行钢线

最新推荐文章于 2024-09-24 16:01:10 发布

阅读量591

点赞数

分类专栏：前端语言

原文链接：https://www.jianshu.com/p/3829d7b8358e

版权

前端语言专栏收录该内容

17 篇文章 1 订阅

订阅专栏

遮罩层滚动穿透分为两种情况：

1.如果弹出层没有滚动事件，就直接在蒙板上加catchtouchmove="preventTouchMove" preventTouchMove:function(){};
示例代码：

<view class="mask" catchtouchmove="preventTouchMove">
    我是遮罩层
</view>

2.如果弹出层有滚动事件，那么在弹出层出现的时候给底部的containerView加上一个class 消失的时候移除。

示例代码：

<view class="mask" wx:if="{{hasMask}}">
    我是遮罩层
</view>

<view class="content" class="{{hasMask ? 'preventTouchMove' : ' '}}">
    我是页面内容
</view>
<!-- js -->
Page{
    ...
    showMask(e){
        //显示遮罩
        this.setData({
            hasMask:true
        })
    },
    hideMask(e){
    //隐藏遮罩
        this.setData({
            hasMask:false
        })
    },
}
<!-- css-->
.preventTouchMove{
    top: 0px ; 
    left:   0px ; 
    width:   100% ; 
    height:   100% ; 
    overflow:   hidden ; 
    position:   fixed ; 
    z-index:   0 ; 
}