小程序弹窗出现背景禁止滑动效果
wxml部分
<view class="mask" catchtouchmove="stopEvent" wx:if="{{modal}}">
<view class="modal-content">
我是弹窗内容
</view>
</view>
js部分
// 阻止滚动
stopEvent: function () {
console.log(111);
return;
},
wxss部分
.mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .5);
}
.modal-content {
display: flex;
width: 200rpx;
height: 200rpx;
justify-content: center;
align-items: center;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
只贴了核心代码
另外在模拟器上是无效的 去真机上才有效