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

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

蛋疼吧

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

解决方法一：给蒙版层添加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)

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。