vue解决弹出蒙层滑动穿透问题的方法

为了解决弹出蒙层滑动穿透问题，可以采用以下方法：

为了解决弹出蒙层滑动穿透问题，可以采用以下方法：

1. 使用better-scroll

better-scroll是一款移动端滚动库，支持弹性滚动、缩放、轮播、回弹等效果。它支持竖向以及横向滑动，并处理了滑动穿透的问题。使用该库可以很容易解决蒙层滑动穿透的问题。以下是使用better-scroll解决蒙层滑动穿透的步骤：

1. 安装better-scroll

npm install better-scroll --save

1. 在Vue组件中引入better-scroll，并使用它来包装需要滚动的元素。

<template>
  <div class="wrapper">
    <div ref="scrollWrapper">
      // 需要滚动的元素
    </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
  mounted () {
    this.scroll = new BScroll(this.$refs.scrollWrapper, {
      // better-scroll 的配置项
    })
  }
}
</script>

通过以上步骤，可以轻松地解决弹出蒙层滑动穿透的问题。

2. 使用局部样式覆盖全局样式

另外一种解决方法是禁止全局的touchmove事件，同时在弹出蒙层时，给其添加样式阻止滚动。即在弹出蒙层时，给body添加遮罩层，并禁止body的滑动。

以下是实现上述方法的具体步骤：

1. 在弹出蒙层时，给body添加类body-mask，同时禁止body的滑动。

const body = document.querySelector('body')
body.classList.add('body-mask')
body.style.overflow = 'hidden'

1. 在蒙层上添加样式阻止滑动。

.body-mask {
  position: fixed;
  width: 100%;
  height: 100%;
  touch-action: none; // 阻止touch事件
}

通过以上步骤，可以禁止滚动，同时解决弹出蒙层滑动穿透的问题。

参考资料：better-scroll官网