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

效果图

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

遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。