vue 进入首页只弹一个弹框_完美解决vue项目中弹出框滑动时，内部页面也跟着滑动问题...

在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()

因为当初是在苹果手机上的测试的，但是在安卓手机发现有些限制，于是解决办法为在main.js中设置全局函数：

// 弹出框显示后调用afterOpen，关闭弹出框前调用beforeClose

Vue.prototype.ModalHelper = (function (bodyCls) {

var scrollTop

return {

afterOpen: function () {

scrollTop = document.scrollingElement.scrollTop

document.body.classList.add(bodyCls)

document.body.style.top = -scrollTop + 'px'

},

beforeClose: function () {

document.body.classList.remove(bodyCls)

// scrollTop lost after set position:fixed, restore it back.

document.scrollingElement.scrollTop = scrollTop

}

}

}('dialog-open'))

在需要的地方调用：

打开滑动： this.ModalHelper.beforeClose();

关闭滑动： this.ModalHelper.afterOpen()

本文地址：https://blog.csdn.net/hahahhahahahha123456/article/details/107864001

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！