背景：最近在写一个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，等我写到继续完善。
到此这篇关于Vue出现弹出层时禁止底部页面跟随滑动的文章就介绍到这了,更多相关Vue 弹出层禁止底部滑动内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！