微信小程序实现弹出层禁止页面滚动

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

效果图

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

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