uniapp H5遮罩层，弹窗，蒙层滚动穿透/滑动穿透

前言

首先来一句：uniapp 一端开发，多端BUG
近期项目用到了uniapp + uview 就出现了很多奇怪的问题，滚动穿透问题更是奇怪且多发。不论是弹窗，蒙层，遮罩，或者普通的元素置顶都会出现，也是解决了很久，特地记录一下，希望对各位’牛马’有用

---

一、解决过程

第一次：在uview 组件（时间组件）u-datetime-picker上碰到，通过百度也是找到了解决方法

// 在父级元素添加重写滚动事件   @touchmove.stop.prevent="() => { }"
<view @touchmove.stop.prevent="() => { }">
	<u-datetime-picker :show="isOpenDateHMS"  :minDate="getMillisecond()" @confirm="closeDateHMS" mode="datetime">
	</u-datetime-picker>
</view>

第二次：是写了自定义的遮罩层，居然这个问题又来了

但是使用了第一次的方法@touchmove居然不生效(・ε・｀)

<template>
	<view class="container">
    	<view class="shade" v-if="canEdite"></view>
	</view>
</template>
<style scoped lang="scss">
@import "common.scss";
.shade{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent !important;
  z-index: 9999;
}
</style>

怎么办呢，继续找呗，还真找到了，他支持page-meta

<template>
	<view class="container">
		<page-meta :page-style="spanStyle"></page-meta>	
    	<view class="shade" v-if="canEdite"></view>
	</view>
</template>
<script >
  export default {
    data() {
      return {
        spanStyle:"overflow:auto"
      }
    },
    methods: {
      upPop(canEdite){
        if(canEdite){
          this.spanStyle="overflow:hidden";
        }else{
          this.spanStyle="overflow:auto";
        }
      }
    }
  }
</script >

linkstart~~~~ 运行，啊！什么啊，它并没有生效，又弄了很长时间，但是项目又比较急就只能搁置了，后面在花时间弄吧

第三次：它它它真滴又出现啦，不过这次是在其他地方uview 弹出层组件 u-popup

我心里想同样是uview的东西那写哪个也应该会生效 --@touchmove，但是它辜负了我的信任，居然没有用
完了客户又在提这个问题了，怎么办呢，谁让客户是上帝呢，智障客户又不是不能用，只能在研究呗，又是2个小时，当要我放弃时终于看到了希望，发现这个鬼玩意的滚动条居然是在整个page上的，试着在控制台写了点样式居然生效了，这不就是转机嘛*.。(๑･∀･๑)*.。
在uni组件的文件里面找到这个路径 uni_modules/uview-ui/components/u-popup/u-popup.vue

watch: {
	show(newValue, oldValue) {
		//在这里添加一句样式    ㄟ(≧◇≦)ㄏ  
	    document.body.style.overflow = !newValue ? "auto" : "hidden";
	    // 是的就是这句话就能解决穿透的问题
		if (newValue === true) {
			// #ifdef MP-WEIXIN
			const children = this.$children
			this.retryComputedComponentRect(children)
			// #endif
		}
	}
	},

document.body.style.overflow 这个样式在其他地方写也是会生效的只要控制好出现的时间就能解决滚动穿透的问题

二、结语

这个滚动穿透的问题绝不止出现的h5这一个平台上，可能会出现在其他地方，毕竟一端开发，多端BUG，后面也是关注过，在各种小程序中也有这个问题，后面要是在项目中遇到的话再来更新吧，毕竟研究需要花时间，期待我下次回来继续跟新吧ฅ( ̳• ◡ • ̳)ฅ