Vue出現(xiàn)彈出層時禁止底部頁面跟隨滑動怎么解決

這篇文章主要介紹了Vue出現(xiàn)彈出層時禁止底部頁面跟隨滑動怎么解決的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue出現(xiàn)彈出層時禁止底部頁面跟隨滑動怎么解決文章都會有所收獲，下面我們一起來看看吧。

1.在有彈出框的頁面中，加上以下方法，彈出框出現(xiàn)時調(diào)用禁止?jié)L動方法stopScroll()，彈出框去掉是調(diào)取允許滾動方法canScroll()即可，代碼如下：

methods : {
   //禁止?jié)L動
   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='';//出現(xiàn)滾動條
        document.removeEventListener("touchmove",mo,false);
    }
}

2.在全局js即main.js中，設(shè)置全局函數(shù)，在使用到的頁面分別調(diào)用即可，代碼如下：

//彈出框禁止滑動
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 = ''// 出現(xiàn)滾動條
  document.removeEventListener('touchmove', mo, false)
}

具體頁面的調(diào)用方法如下：

//當(dāng)需要禁止彈出框底部內(nèi)容滑動時調(diào)用： 
this.stopScroll() 
//當(dāng)需要頁面恢復(fù)滑動功能時調(diào)用： 
this.canScroll()

注：以上方法適用于vue項目的移動端

關(guān)于“Vue出現(xiàn)彈出層時禁止底部頁面跟隨滑動怎么解決”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“Vue出現(xiàn)彈出層時禁止底部頁面跟隨滑動怎么解決”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。