Vue出现弹出层时,禁止底部页面跟随滑动
背景:最近在写一个vue项目,当出现弹出层时,发现底部页面跟随滚动,但是产品不想要这种效果,于是找各种资料,发现很多说法,但是试了试,发现有的根本就不行,比如说有人提出用vue中提供的@touchmove.prevent方法来解决,但是我试了没起作用,或者@touchmove.prevent.stop也不起作用。下面是几种可以解决问题的方式,仅供参考:1.在有弹出框的页面中,加上以下方法,弹出..
·
背景:最近在写一个vue项目,当出现弹出层时,发现底部页面跟随滚动,但是产品不想要这种效果,于是找各种资料,发现很多说法,但是试了试,发现有的根本就不行,比如说有人提出用vue中提供的@touchmove.prevent方法来解决,但是我试了没起作用,或者@touchmove.prevent.stop也不起作用。下面是几种可以解决问题的方式,仅供参考:
1.在有弹出框的页面中,加上以下方法,弹出框出现时调用禁止滚动方法stopScroll(),弹出框去掉是调取允许滚动方法canScroll()即可,代码如下:
methods : {
//禁止滚动
stopScroll(){
var mo=function(e){e.preventDefault();};
document.body.style.overflow='hidden';
document.addEventListener("touchmove",mo,false);//禁止页面滑动
},
/***取消滑动限制***/
canScroll(){
var mo=function(e){e.preventDefault();};
document.body.style.overflow='';//出现滚动条
document.removeEventListener("touchmove",mo,false);
}
}
2.在全局js即main.js中,设置全局函数,在使用到的页面分别调用即可,代码如下:
//弹出框禁止滑动
Vue.prototype.stopScroll = 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.stopScroll()
//当需要页面恢复滑动功能时调用:
this.canScroll()
注:以上方法适用于vue项目的移动端,如果是PC,等我写到继续完善,或者大牛可以直接评论区留下你的方法,哈哈。
更多推荐
已为社区贡献2条内容
所有评论(0)