微信小程序 | 设置打开弹出层后，让下层页面不可滑动

这个问题在很多时候都会用到，比如在调用自定义弹窗、加载动画的时候，需要让页面不可以滑动，等等。

其实这个问题很简单，直接看代码：

<!-- index.wxml -->
<view class="mask" catchtouchmove="stopTouch" bindtap="hidePop" wx:if="{{mask}}"></view>
<view class="pop" catchtouchmove="stopTouch" wx:if="{{mask}}">
  <view>这是弹出层--1</view>
  <view>这是弹出层--2</view>
  <view>这是弹出层--3</view>
</view>
<view class="btn" bindtap="showPop">按钮</view>

// index.js
Page({
  data: {
  	mask:false,
  },
  stopTouch() {},
  showPop() {
    this.setData({
      mask: true
    })
  },
  hidePop() {
    this.setData({
      mask: false
    })
  }
})

/* index.wxss */
.mask, .pop, .btn {
  position: fixed;
  bottom: 0;
  left: 0;
}

.mask {
  width: 100%;
  height: 100%;
  z-index: 997;
  background-color: #858585b6;
}
.pop {
  height: 200px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #fff;
  z-index: 998;
}
.btn {
  width: 100%;
  height: 50px;
  color: aliceblue;
  text-align: center;
  line-height: 50px;
  background-color: #4df547;
}

我们的弹出层的层级肯定是很高的，弹出层出现后，我们再点击、滑动的时候，点击的节点肯定是弹出层的节点，如果我们再弹出层以及遮罩层（如果有的话）绑定一个catchtouchmove事件，这样，在滑动的时候就无法滑动页面了在这里插入图片描述