小程序 遮罩层(阻止事件穿透)

小程序 遮罩层(阻止事件穿透)

  • 若弹出层没有滚动事件

直接在蒙板上加catchtouchmove=“preventTouchMove” 即可


    我是遮罩层

  • 若弹出层有滚动事件
    需要动态监听遮罩层的现实和隐藏,然后给底部滚动内容添加动态样式即可,消失时去除改样式。

    我是遮罩层



    我是页面内容


Page{
    ...
    showMask(e){
        //显示遮罩
        this.setData({
            hasMask:true
        })
    },
    hideMask(e){
    //隐藏遮罩
        this.setData({
            hasMask:false
        })
    },
}

.preventTouchMove{
    top: 0px ; 
    left:   0px ; 
    width:   100% ; 
    height:   100% ; 
    overflow:   hidden ; 
    position:   fixed ; 
    z-index:   0 ; 
}

你可能感兴趣的:(前端,小程序)