快捷導(dǎo)航

Vue出現(xiàn)彈出層時(shí)禁止底部頁(yè)面跟隨滑動(dòng)

更新時(shí)間：2022年07月29日 16:18:16 作者：wh_xmy

本文主要介紹了Vue出現(xiàn)彈出層時(shí)禁止底部頁(yè)面跟隨滑動(dòng)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

背景：最近在寫一個(gè)vue項(xiàng)目，當(dāng)出現(xiàn)彈出層時(shí)，發(fā)現(xiàn)底部頁(yè)面跟隨滾動(dòng)，但是產(chǎn)品不想要這種效果，于是找各種資料，發(fā)現(xiàn)很多說(shuō)法，但是試了試，發(fā)現(xiàn)有的根本就不行，比如說(shuō)有人提出用vue中提供的@touchmove.prevent方法來(lái)解決，但是我試了沒(méi)起作用，或者@touchmove.prevent.stop也不起作用。下面是幾種可以解決問(wèn)題的方式，僅供參考：

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

methods : {
? ?//禁止?jié)L動(dòng)
? ?stopScroll(){
? ? ? ? var mo=function(e){e.preventDefault();};
? ? ? ? document.body.style.overflow='hidden';
? ? ? ? document.addEventListener("touchmove",mo,false);//禁止頁(yè)面滑動(dòng)
? ? },
? ? /***取消滑動(dòng)限制***/
? ? canScroll(){
? ? ? ? var mo=function(e){e.preventDefault();};
? ? ? ? document.body.style.overflow='';//出現(xiàn)滾動(dòng)條
? ? ? ? document.removeEventListener("touchmove",mo,false);
? ? }
}

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

//彈出框禁止滑動(dòng)
Vue.prototype.stopScroll = function () {
  var mo = function (e) { e.preventDefault() }
  document.body.style.overflow = 'hidden'
  document.addEventListener('touchmove', mo, false)// 禁止頁(yè)面滑動(dòng)
}
 
//彈出框可以滑動(dòng)
Vue.prototype.canScroll = function () {
  var mo = function (e) {
    e.preventDefault()
  }
  document.body.style.overflow = ''// 出現(xiàn)滾動(dòng)條
  document.removeEventListener('touchmove', mo, false)
}

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

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

注：以上方法適用于vue項(xiàng)目的移動(dòng)端，如果是PC，等我寫到繼續(xù)完善。

到此這篇關(guān)于Vue出現(xiàn)彈出層時(shí)禁止底部頁(yè)面跟隨滑動(dòng)的文章就介紹到這了,更多相關(guān)Vue 彈出層禁止底部滑動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: