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出現彈出層時禁止底部頁面跟隨滑動怎么解決”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。