Vue出現彈出層時禁止底部頁面跟隨滑動

Posted on by

背景：最近在寫一個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 彈出層禁止底部滑動內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：