Vue出现弹出层时禁止底部页面跟随滑动怎么解决

这篇文章主要介绍了Vue出现弹出层时禁止底部页面跟随滑动怎么解决的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue出现弹出层时禁止底部页面跟随滑动怎么解决文章都会有所收获，下面我们一起来看看吧。

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项目的移动端

关于“Vue出现弹出层时禁止底部页面跟随滑动怎么解决”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Vue出现弹出层时禁止底部页面跟随滑动怎么解决”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。