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

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

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

修改后：本例分享微信小程序实现弹出层禁用页面滚动的代码，供参考。代码包含：+效果图+是否随页面滚动+使用catchtouchmove禁用+通过return关闭+.wxml文件中添加button，绑定切换事件实现滑动。

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

效果图

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

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