记一次uniapp使用scroll-view标签产生的滑动穿透的解决方法

情景一：弹窗+蒙版

        1.在蒙版的上一级标签属性中添加以下代码

@touchmove.stop.prevent="preventTouchMove"

        2.并在 methods 中添加以下代码

preventTouchMove(){},

情景二：弹窗+蒙版+scroll-view（scroll-view内的内容不滑动）

         1.在蒙版的上一级标签属性中添加以下代码

@touchmove.stop.prevent="preventTouchMove"

        2.并在 methods 中添加以下代码

preventTouchMove(){},

        ：：与情景一区别不大

情景三：弹窗+蒙版+scroll-view（scroll-view内的内容也会滑动）

         1.在蒙版的上一级标签属性中添加以下代码

@touchmove.stop.prevent="preventTouchMove"

        2.并在 methods 中添加以下代码

preventTouchMove(){},

        3. 完成以上代码后，蒙版处不在滑动穿透，scroll-view内的内容在没有滑到底部的时候也会不有滑动穿透，通过搜集各种资料，没有找到官方提供的解决方法，只找到了一种忍辱负重的解决方法，但是这种方法也是有弊端的，

        在<template>标签的次一级<view>标签上添加一个 

 :class="{{展示弹窗}}?'overflow':'原有样式' "


/*overflow的内容*/
.overflow{
	height: 100vh;
	overflow: hidden;
	}

        ：：这种方法确实可以解决scroll-view滑动到底部产生滑动穿透的问题，但是当你使用这种方法的时候，不管你在哪里进行的动作，都会跳到顶部，完成目标操作后还得自己重新返回去。

情景四：在蒙版元素和弹窗元素身上添加catchtouchmove="true"。

1. 使用cancaptureevent属性：在需要阻止滑动穿透的元素的父级上，添加cancaptureevent属性，并将其值设为true。这样会阻止事件冒泡到整个父级元素，包括背后的内容。

<!--蒙版-->
<view wx:if="{{isEquity==true}}" class="maskEquity" bindtap="closeEquityButton" catchtouchmove="true"></view>

 

一些浅薄的理解，希望对你有帮助，另外希望各位大神多多指导！！！