WeChat applet | set after open the popup layer, has the pages do not slip

This problem can be used in many situations, such as calling custom popovers, making the page not slide when loading animations, etc.

In fact, the problem is very simple, directly look at the code:

<! -- index.wxml -->
<view class="mask" catchtouchmove="stopTouch" bindtap="hidePop" wx:if="{{mask}}"></view>
<view class="pop" catchtouchmove="stopTouch" wx:if="{{mask}}">
  <view>This is the pop-up layer --1</view>
  <view>This is the pop-up layer --2</view>
  <view>This is the pop-up layer --3</view>
</view>
<view class="btn" bindtap="showPop">button</view>
Copy the code

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

/* 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;
}
Copy the code

The level of our pop-up layer must be very high. After the pop-up layer appears, when we click and slide again, the node clicked must be the node of the pop-up layer, if we have another pop-up layer and mask layer (if any) bound to onecatchtouchmoveEvent, so that the page cannot be swiped while swiping