微信小程序中如何设置弹出层阻止页面滚动？

本文共计376个文字，预计阅读时间需要2分钟。

原文示例：本文实例为大家分享了微信小程序实现弹出层禁止页面滚动的具体代码，供大家参考。具体内容如下：效果图+是否随页面滚动+catchtouchmove=true开启+return关闭+.wxml+button+bindtap=switch上下滑动

改写后：本文提供微信小程序实现弹出层禁用页面滚动的代码示例。代码包括：效果展示图、是否随页面滚动、使用catchtouchmove=true启用、使用return关闭。在.wxml文件中添加button元素，绑定tap事件为'switch'以实现上下滑动。

本文实例为大家分享了微信小程序实现弹出层禁止页面滚动的具体代码，供大家参考，具体内容如下

效果图

是否随页面滚动 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     })   }, })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。