微信小程序实现弹出层禁止页面滚动
作者：换日线°
这篇文章主要为大家详细介绍了微信小程序实现弹出层禁止页面滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现弹出层禁止页面滚动的具体代码，供大家参考，具体内容如下
效果图
是否随页面滚动 catchtouchmove true开启 return关闭
.wxml
<button bindtap="switch">上下滑动({{catchtouchmove?'开':'关'}})</button>
<button bindtap="modal">弹出层</button>
<view bindtap="modal" class="modal" wx:if="{{modalName}}" catchtouchmove="{{catchtouchmove?true:return}}">
<view></view>
</view>.wxss
page{
height: 160vh;
}
.modal{
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
}
.modal>view{
width: 70%;
height: 500rpx;
background-color: #fff;
}.js
Page({
data: {
catchtouchmove:false,
modalName:false,
},
switch(){
this.setData({
catchtouchmove:!this.data.catchtouchmove
})
},
modal(){
this.setData({
modalName:!this.data.modalName
})
},
})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。