vue蒙层滑动穿透问题

添加小程序，兑换各种视频教程/数据资源。

1. 问题：在蒙层上滑动时，会触发底层的滑动。

2. 解决一：

    2.1 vue的 @touchmove.prevent 可以用来阻止滑动，但是同时会禁止蒙层内的子元素的滑动事件，如果蒙层内子元素没有中间滑动需求（如只有点击需求），就可以用 @touchmove.prevent 实现阻止蒙层滑动穿透问题。
    2.2 蒙层设为fixed悬浮在最上，底部列表设置overflow-y: hidden，对body和html标签设置相关样式overflow-y: hidden，这样就控制住了底部列表滑动问题。
　2.3 蒙层空白处点击事件与中间文字点击事件处理，防止事件冒泡带来其他bug。

<div class="ceng" v-if="isCeng" @touchmove.stop.prevent="touchmovehandle">		
		<button @getuserinfo="getVxUserInfo" open-type="getUserInfo" v-if="!userName" class="btn">点击微信授权</button>
</div>

3. 解决二：设置底层（非蒙层）在蒙层显示的样式，overflow: hidden;，如果是小程序，底层存在最高级标签的，就让蒙层显示时，该标签display:none。

.noScroll{
	overflow: hidden;
	position: fixed;
	height: 100%;
}

 

案例：方法二在vue中的使用。

watch:{
    isShowFade(bool) {  //蒙层 v-if='isShowFade'
      this.$nextTick(() => {
        document.getElementsByTagName('body')[0].className = bool
          ? 'noscroll'
          : '';
      });
    },
}
<style>
.noscroll{
    overflow: hidden;
    position: fixed;
}
</style>