Vue出現(xiàn)彈出層時(shí)禁止底部頁(yè)面跟隨滑動(dòng)
背景：最近在寫一個(gè)vue項(xiàng)目，當(dāng)出現(xiàn)彈出層時(shí)，發(fā)現(xiàn)底部頁(yè)面跟隨滾動(dòng)，但是產(chǎn)品不想要這種效果，于是找各種資料，發(fā)現(xiàn)很多說法，但是試了試，發(fā)現(xiàn)有的根本就不行，比如說有人提出用vue中提供的@touchmove.prevent方法來(lái)解決，但是我試了沒起作用，或者@touchmove.prevent.stop也不起作用。下面是幾種可以解決問題的方式，僅供參考：
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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue使用JSON編輯器:vue-json-editor詳解
文章介紹了如何在Vue項(xiàng)目中使用JSON編輯器插件`vue-json-editor`,包括安裝、引入、注冊(cè)和使用示例,通過這些步驟,用戶可以在Vue應(yīng)用中輕松實(shí)現(xiàn)JSON數(shù)據(jù)的編輯功能,文章最后呼吁大家支持腳本之家2025-01-01
vue2 前后端分離項(xiàng)目ajax跨域session問題解決方法
本篇文章主要介紹了vue2 前后端分離項(xiàng)目ajax跨域session問題解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
Vue3動(dòng)態(tài)使用KeepAlive組件的實(shí)現(xiàn)步驟
在 Vue 3 項(xiàng)目中,我們有時(shí)需要根據(jù)路由的 meta 信息來(lái)動(dòng)態(tài)決定是否使用 KeepAlive 組件,以控制組件的緩存行為,所以本文給大家介紹了Vue3動(dòng)態(tài)使用KeepAlive組件的實(shí)現(xiàn)步驟,通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-11-11
這篇文章主要給大家介紹了關(guān)于eslint常見的一些報(bào)錯(cuò)及解決方法,解決eslint的報(bào)錯(cuò)問題可以要根據(jù)報(bào)錯(cuò)行數(shù)快速定位.文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
在Vue的開發(fā)中，一旦我們用到對(duì)話框，經(jīng)常出現(xiàn)的問題是對(duì)話框被遮罩層擋住,怎么來(lái)解決這個(gè)問題呢？下面小編給大家?guī)?lái)了Vue開發(fā)中對(duì)話框被遮罩層擋住的問題及解決方法，一起看看吧2018-11-11
vue中v-for和v-if一起使用之使用compute的示例代碼
這篇文章主要介紹了vue中v-for和v-if一起使用之使用compute的相關(guān)知識(shí)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-05-05
vue項(xiàng)目中定義全局變量、函數(shù)的幾種方法
這篇文章主要介紹了vue項(xiàng)目中定義全局變量、函數(shù)的幾種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了Vue對(duì)象的基本組成和Vue對(duì)象掛載的幾種方式,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了在vue項(xiàng)目中使用sass的配置方法,需要的朋友可以參考下2018-03-03
iview 權(quán)限管理的實(shí)現(xiàn)
本文主要介紹了iview 權(quán)限管理，iview-admin2.0自帶權(quán)限管理。可以通過設(shè)置路由的meta對(duì)象的參數(shù)access來(lái)分配權(quán)限。感興趣的可以了解一下2021-07-07