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

本文主要是介绍微信小程序弹出层禁止页面滚动，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

效果图

是否随页面滚动 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，很少看博客，对你有帮助别忘记点赞收藏。

这篇关于微信小程序弹出层禁止页面滚动的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！