本文实例为大家分享了微信小程序实现弹出层禁止页面滚动的具体代码,供大家参考,具体内容如下 效果图 是否随页面滚动 catchtouchmove true开启 return关闭 .w
本文实例为大家分享了微信小程序实现弹出层禁止页面滚动的具体代码,供大家参考,具体内容如下
效果图
是否随页面滚动 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
})
},
})
--结束END--
本文标题: 微信小程序实现弹出层禁止页面滚动
本文链接: https://www.lsjlt.com/news/153688.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0