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