vue弹出层滑动禁止背景跟着滑动_解决：vue 弹窗滑动 底部页面跟着滑动

解决：在弹窗的外层div上添加时间 @touchmove.prevent即可

但是这种方法会导致弹窗无法滚动

经测试：此方法只适用弹窗不需要滚动的情况

若想弹窗滚动，

1.这里使用了vant的弹窗组件，能解决弹窗滚动问题 但是在ios手机上 斜着滑蒙罩层 还是会导致低层页面滚动

2.这里想到一个稍微巧妙点的想法： 因为弹窗需要滚动 干脆就把弹窗的最大高度设置为90% 这样用户基本不会点到蒙罩层

1.2.结合处理是我目前对弹窗滚动 底层页面跟着滚动的处理方法

如有大佬有好的方法 还望赐教

以上是小白的傻子试解决方法。

真正解决方法来咯~~~~看好咯

在vue项目中注册两个全局方法

方法1---在main.js中写入两个方法 一个是可以滚动方法 一个是禁止滚动方法

//弹出框禁止滑动

Vue.prototype.noScroll = function () {

var mo = function (e) { e.preventDefault() }

document.body.style.overflow = 'hidden'

document.addEventListener('touchmove', mo, false)// 禁止页面滑动

}

//弹出框可以滑动

Vue.prototype.canScroll = function () {

var mo = function (e) {

e.preventDefault()

}

document.body.style.overflow = ''// 出现滚动条

document.removeEventListener('touchmove', mo, false)

}

在弹窗需要弹出展示前先调用禁止滚动的方法、

//禁止主页面滑动

this.noScroll()

在关闭弹窗之前调用滚动方法

//主页面可滑动

this.canScroll()