微信小程序 - 解决遮罩层的滚动穿透问题（以及实现弹框功能点击蒙层关闭弹框）

  今天我在做一个点击某个按钮显示弹框的时候，发现弹框自带的蒙层盖完整个页面了，但是被盖住的内容还是可以上下滑动，这个效果并不是我想要的，经过我多次研究并百度之后，我终于可以解决这个问题了，下面我来说一下如何实现的：

注意点：这个效果在编辑器（电脑）上面是看不出效果的，需要用手机上看才能看出效果

1、弹框里面没有滚动条的情况：

  直接在弹框蒙层最外层加上catchtouchmove="{{true}}"，或者定义catchtouchmove="catchTouch"方法，在方法中直接为空即可，使用例子如下：

<!-- <view class="tipsss" catchtap="inow" data-id="1" wx:if="{{status}}" catchtouchmove="{{true}}"> -->
<view class="tipsss" catchtap="inow" data-id="1" wx:if="{{status}}" catchtouchmove="catchTouch">
    <view class="tips" catchtap="inow" data-id="2">
      <text class="title">欢迎</text>
      <view class="tips-body">
        <view class="item">
          <text>我的CSDN地址：</text>
          <text class="phone adr" bindtap='copyText' data-text="{{contents}}">https://blog.csdn.net/LiaoFengJi</text>
        </view>
      </view>
    </view>
  </view>

data(){
	status:false
}

// 解决遮罩层的滚动穿透问题
catchTouch(){},

// 点击遮罩层关闭弹框
inow(e) {
    console.log(111111, e.currentTarget.dataset.id)
    let id = e.currentTarget.dataset.id;
    if (id == 1) {
      this.setData({
        status: false
      })
    }
    console.log('this.data.status--->', this.data.status)
  },
  // 控制弹框的显示与否
  concatNew() {
    console.log('this.data.status-11-->', this.data.status)
    this.setData({
      status: !this.data.status
    })
  },

  针对catchtouchmove方法，原生小程序使用catchtouchmove=“catchTouch”，mpvue中使用@touchmove.stop=“catchTouch”，注意要给个空方法，否则会报警告

2、弹框里面有滚动条的情况：

  这里我还没想出更好的解决方案，先说一个复杂的方案吧，就是两个子标签同时根据page父标签进行固定定位。代码如下：

（1）xml文件：

<view class="tips-icon" bindtap="concatNew">
    <image src="../../images/home.png"></image>
  </view>

  <view class="tipsss" wx:if="{{status}}" catchtouchmove="{{true}}" catchtap="inow" data-id="1"></view>
  <view class="tips" catchtap="inow" data-id="2" wx:if="{{status}}">
    <text class="title">欢迎</text>
    <view class="tips-body">
      <view class="text">
        <text>121211</text>
        <text>1212112</text>
        <text>1212113</text>
        <text>1212114</text>
        <text>1212115</text>
        <text>1212116</text>
        <text>1212117</text>
        <text>1212118</text>
        <text>1212119</text>
        <text>12121110</text>
        <text>12121111</text>
      </view>
    </view>
  </view>

（2）wss文件

.tips-icon {
  position: fixed;
  right: 0;
  bottom: 100rpx;
  width: 105rpx;
  height: 100rpx;
}

.tips-icon image {
  width: 100%;
  height: 100%;
}

/* 弹框开始 */
.tipsss {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.tips {
  width: 560rpx;
  background-color: #fff;
  position: fixed;
  top: 300rpx;
  left: 95rpx;
}

.tips .title {
  line-height: 60rpx;
  text-align: center;
  font-weight: bold;
  display: block;
  border-bottom: 1rpx solid #8c9bae;
}

.tips-body {
  height: 320rpx;
  overflow: scroll;
}

.tips-body .text text {
  display: block;
  text-align: center;
  line-height: 90rpx;
}
/* 弹框结束 */

（3）效果图