小程序遮盖层写法 防止触摸穿透

1.内容部分正常写

2.遮罩部分

弹出层
view class='eject_layer' wx:if="{{shop_tab_flag}}"</view>
遮罩层 
<view class='cover' wx:if="{{shop_tab_flag}}">
</view>

3.CSS

遮罩层  100vh是等于屏幕视口的高度
.cover {
    width: 100%;
    height: 100vh;
    opacity: 0.5;
    position: absolute;
    background-color: black;
    top: 0;
    overflow: hidden;
}

弹出层正常写

最重要的是需要一个盒子包裹底层的部分

.mjltest_style {
     position: fixed;
    top: 0rpx;
    left: 0;
    bottom: 0;
    right: 0;
}

当点击显示的时候 由于每次都是0px 所以都会回到顶部
我们只需要获取到鼠标的滚动事件 把滚动的距离赋值给top就OK

onPageScroll: function (e) { // 获取滚动条当前位置
        console.log(e)
    },