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

青旅半醒 2021-08-19 15:04 1225阅读 0赞

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

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

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

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

<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
        })
      },

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70]  
  **针对catchtouchmove方法，原生小程序使用catchtouchmove=“catchTouch”，mpvue中使用@touchmove.stop=“catchTouch”，注意要给个空方法，否则会报警告**

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

这里我还没想出更好的解决方案，先说一个复杂的方案吧，就是两个子标签同时根据page父标签进行固定定位。代码如下：  
![在这里插入图片描述][20190924151030236.png]

###### （1）xml文件： ######

###### （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）效果图 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70]: /images/20210813/fbfe039dbfb54533be1c800af0c35479.png
[20190924151030236.png]: /images/20210813/81565e9801104dbb8364f00df6a84f2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 1]: /images/20210813/1ea325a7aef044119875f90ea5063771.png