我要评论在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
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论