移动端项目弹框底层滚动问题这是最简单的一种方式，我们可以直接给弹框添加上 @touchmove.prevent，他的作用

移动端项目开发的时候，经常会涉及到弹出弹框后，弹框下面的内容层还是可以滚动，用户体验很不好，我在网上参考了各方大佬的经验后，总结了几个方法，供大家参考一下。

第一种方案（仅适合VUE项目）

这是最简单的一种方式，我们可以直接给弹框添加上 @touchmove.prevent，他的作用就是当弹框生效的时候，禁止屏幕滑动，但是这种方式仅支持仅支持vue项目。

<div class="Dialog" v-if="show" @click="open" @touchmove.prevent></div>

第二种方案

点击弹出的时候，给body添加overflow：hidden的属性；

当弹框关闭的时候，还原body的属性overflow:auto

第三种方案

这种方案用于处理弹框内部也需要滚动的情况：

我们可以在用户点击弹窗的时候，监听touchmove事件，并禁止；

点击关闭弹框的时候，再次监听监听touchmove事件，remove删除；

这样做的好处是，通过指令进行控制，结构中没有直接禁用滑动事件。

click(){
    //开启弹窗
    this.dialog=true
    document.body.classList.add('overflow-hidden');
    //此处的overflow-hidden是需要添加的类名
    document.addEventListener('touchmove', this.touchStart,{passive:false});
},
touchStart(){
    event.preventDefault();//让浏览器不要执行与事件关联的默认动作
},
close(){
    //关闭弹窗
    this.tan=false
    document.body.classList.remove('overflow-hidden');
    document.removeEventListener('touchmove',this.touchStart,{passive:false});
}