快捷導(dǎo)航

vue移動(dòng)端彈起蒙層滑動(dòng)禁止底部滑動(dòng)操作

更新時(shí)間：2020年07月22日 10:38:12 作者：vieber

這篇文章主要介紹了vue移動(dòng)端彈起蒙層滑動(dòng)禁止底部滑動(dòng)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

解決辦法

在蒙層彈起的時(shí)候?qū)ody設(shè)置為fixed定位

在蒙層消失的時(shí)候?qū)ody恢復(fù)原位

popupVisible(newValue) {
  if (newValue) {
    document.body.style.position = 'fixed';
    document.body.style.width = '100%';
    document.body.style.height = '100%';
  }
  else {
    document.body.style.position = 'static';
    document.body.style.height = 'auto';
  }
},

設(shè)置為fixed的時(shí)候整個(gè)頁面會(huì)恢復(fù)原位，如果需要把位置開始scrollY記下來，恢復(fù)的時(shí)候在滾到原來的位置

popupVisible(newValue) {
  if (newValue) {
    document.body.style.position = 'fixed';
    document.body.style.width = '100%';
    document.body.style.height = '100%';
    this.top = window.scrollY;
  }
  else {
    document.body.style.position = 'static';
    document.body.style.height = 'auto';
    window.scrollTo(0, this.top);
  }
}

補(bǔ)充知識(shí)：解決使用vue時(shí)頁面內(nèi)有彈窗時(shí)禁止頁面滾動(dòng) 以及頁面內(nèi)彈窗因絕對(duì)定位導(dǎo)致頁面壓縮的問題

如下所示：

@touchmove.prevent

當(dāng)頁面彈窗出現(xiàn)時(shí)設(shè)置 @touchmove.prevent = "false";

2.頁面內(nèi)彈窗因絕對(duì)定位導(dǎo)致頁面壓縮的問題造成底部導(dǎo)航欄固定在輸入鍵盤上面的問題

// 動(dòng)態(tài)設(shè)置背景圖的高度為瀏覽器可視區(qū)域高度
// 首先在Virtual DOM渲染數(shù)據(jù)時(shí)，設(shè)置下背景圖的高度．
  this.bodyHeight = `${document.documentElement.clientHeight}`;
// 然后監(jiān)聽window的resize事件．在瀏覽器窗口變化時(shí)再設(shè)置下背景圖高度．
 window.onresize = function temp() {
 var bodyHeight = `${document.documentElement.clientHeight}`;
 that.bodyHeight = bodyHeight;
 };

通過判斷 bodyHeight 數(shù)值的變化，來控制底部導(dǎo)航欄的出現(xiàn)與隱藏

以上這篇vue移動(dòng)端彈起蒙層滑動(dòng)禁止底部滑動(dòng)操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue綁定class和綁定內(nèi)聯(lián)樣式的實(shí)現(xiàn)方法
本文主要介紹了Vue綁定class和綁定內(nèi)聯(lián)樣式的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
通過npm引用的vue組件使用詳解
本文章通過實(shí)現(xiàn)一個(gè)vue-dialog的彈出層組件，然后附加說明如果發(fā)布此包到npm，且能被其他項(xiàng)目使用。本文給大家介紹的非常詳細(xì)，需要的的朋友參考下
2017-03-03
Vue3 + TypeScript 開發(fā)總結(jié)
本文直接上 Vue3 + TypeScript + Element Plus 開發(fā)的內(nèi)容，感興趣的話一起來看看吧
2021-08-08
Element 默認(rèn)勾選表格 toggleRowSelection的實(shí)現(xiàn)
這篇文章主要介紹了Element 默認(rèn)勾選表格 toggleRowSelection的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
vue啟動(dòng)后請(qǐng)求后端接口報(bào)ERR_EMPTY_RESPONSE錯(cuò)誤的解決
這篇文章主要介紹了vue啟動(dòng)后請(qǐng)求后端接口報(bào)ERR_EMPTY_RESPONSE錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
Vue組件之間傳值/調(diào)用幾種方式
這篇文章主要介紹了Vue組件之間傳值/調(diào)用的幾種方式,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-12-12
利用Vue Native構(gòu)建移動(dòng)應(yīng)用的全過程記錄
VueNative是一個(gè)使用JavaScript構(gòu)建跨平臺(tái)原生移動(dòng)應(yīng)用程序的框架m這篇文章主要給大家介紹了關(guān)于如何利用Vue Native構(gòu)建移動(dòng)應(yīng)用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2021-08-08
Vant彈出列表多選輸入框下拉選擇代碼(可直接復(fù)制使用)
vue項(xiàng)目無論是用element中的Select選擇器,還是使用公司維護(hù)的組件,都可以輕松實(shí)現(xiàn)單選和多選的需求,這篇文章主要給大家介紹了關(guān)于Vant彈出列表多選輸入框下拉選擇的相關(guān)資料,需要的朋友可以參考下
2024-01-01
深入探索Vue3.x中的七大高級(jí)用法
Vue3.x 自發(fā)布以來,憑借其性能的顯著提升和更加靈活的組合式 API,已經(jīng)成為了現(xiàn)代前端開發(fā)的重要工具之一,除了基本用法外,Vue3.x 還提供了許多高級(jí)功能,本文將和大家一起深入探索Vue3.x中的七大高級(jí)用法,需要的朋友可以參考下
2024-03-03
關(guān)于vant的日歷組件,在iPhonex上可選日期空白
這篇文章主要介紹了關(guān)于vant的日歷組件,在iPhonex上可選日期空白，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04