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

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

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 ; 
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1 CALayer IOS SDK详解之CALayer(一) http://doc.okbase.net/Hell...
    Kevin_Junbaozi阅读 5,210评论 3 23
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,010评论 3 119
  • 奋笔疾书到半夜,也是够拼的。
    对上暗号喝一杯阅读 475评论 0 0
  • 二零一七年一月一日,周日,深圳的阳光灿烂的不得了。我早早的起了床,因为问问习惯早起,我们全家的生物钟都调到天刚刚亮...
    夏靓靓阅读 862评论 0 2
  • 现在的我,已经忘了什么是追求。 想到从前,自己雄心壮志,而今碌碌无为,高考前不断鼓励自己,加油,可以有更好的未来,...
    Leyail阅读 215评论 0 0