关于小程序弹窗滑动穿透问题

前言

在项目开发过程中我们总会遇到需要用各种形式的弹窗来展示一些内容，然而这些弹窗实际应用上并不是特别友好，总是有各种各样的问题，总想对它口吐芬芳。

蛋疼吧

比如比较典型的一种就是滑动穿透，下面我们就遇到的几种情况来分析解决一下它们：

解决方法一：给蒙版层添加catchtouchmove事件阻止冒泡

 <view class="mask" catchtouchmove="returnMove"></view>

在 js 页面设置该函数

  returnMove(){
    return
  },

解决方法二：当弹窗显示的时候，给整个页面的父容器添加一个样式，写死它的高度，超出的内容则隐藏掉

 .resetContainer {
  overflow: hidden;
  height: 100vh
}
/* 或者 */
.resetContainer{
  position: fixed;
  width: 100vw;
  height: 100vh;
}

该方法存在缺点：当页面滑动到某个位置，显示弹窗的时候，父容器内容会回到最开始的位置即页面顶部，用户体验较差。

请在真机上看效果,开发工具总是存在各种不兼容，懂的自然懂。(ps:就 是 个 垃 圾 I D E)