欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue移動端彈起蒙層滑動禁止底部滑動操作

 更新時間：2020年07月22日 10:38:12   作者：vieber  
這篇文章主要介紹了vue移動端彈起蒙層滑動禁止底部滑動操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

解決辦法

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

在蒙層消失的時候?qū)ody恢復原位

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的時候整個頁面會恢復原位，如果需要把位置開始scrollY記下來，恢復的時候在滾到原來的位置

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);
  }
}

補充知識：解決使用vue時頁面內(nèi)有彈窗時禁止頁面滾動 以及頁面內(nèi)彈窗因絕對定位導致頁面壓縮的問題

如下所示：

@touchmove.prevent

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

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

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

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

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

相關(guān)文章

  • Vue綁定class和綁定內(nèi)聯(lián)樣式的實現(xiàn)方法

    Vue綁定class和綁定內(nèi)聯(lián)樣式的實現(xiàn)方法

    本文主要介紹了Vue綁定class和綁定內(nèi)聯(lián)樣式的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-11-11
  • 通過npm引用的vue組件使用詳解

    通過npm引用的vue組件使用詳解

    本文章通過實現(xiàn)一個vue-dialog的彈出層組件，然后附加說明如果發(fā)布此包到npm，且能被其他項目使用。本文給大家介紹的非常詳細，需要的的朋友參考下
    2017-03-03
  • Vue3 + TypeScript 開發(fā)總結(jié)

    Vue3 + TypeScript 開發(fā)總結(jié)

    本文直接上 Vue3 + TypeScript + Element Plus 開發(fā)的內(nèi)容，感興趣的話一起來看看吧
    2021-08-08
  • Element 默認勾選表格 toggleRowSelection的實現(xiàn)

    Element 默認勾選表格 toggleRowSelection的實現(xiàn)

    這篇文章主要介紹了Element 默認勾選表格 toggleRowSelection的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2019-09-09
  • vue啟動后請求后端接口報ERR_EMPTY_RESPONSE錯誤的解決

    vue啟動后請求后端接口報ERR_EMPTY_RESPONSE錯誤的解決

    這篇文章主要介紹了vue啟動后請求后端接口報ERR_EMPTY_RESPONSE錯誤的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-05-05
  • Vue組件之間傳值/調(diào)用幾種方式

    Vue組件之間傳值/調(diào)用幾種方式

    這篇文章主要介紹了Vue組件之間傳值/調(diào)用的幾種方式,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2022-12-12
  • 利用Vue Native構(gòu)建移動應用的全過程記錄

    利用Vue Native構(gòu)建移動應用的全過程記錄

    VueNative是一個使用JavaScript構(gòu)建跨平臺原生移動應用程序的框架m這篇文章主要給大家介紹了關(guān)于如何利用Vue Native構(gòu)建移動應用的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2021-08-08
  • Vant彈出列表多選輸入框下拉選擇代碼(可直接復制使用)

    Vant彈出列表多選輸入框下拉選擇代碼(可直接復制使用)

    vue項目無論是用element中的Select選擇器,還是使用公司維護的組件,都可以輕松實現(xiàn)單選和多選的需求,這篇文章主要給大家介紹了關(guān)于Vant彈出列表多選輸入框下拉選擇的相關(guān)資料,需要的朋友可以參考下
    2024-01-01
  • 深入探索Vue3.x中的七大高級用法

    深入探索Vue3.x中的七大高級用法

    Vue3.x 自發(fā)布以來,憑借其性能的顯著提升和更加靈活的組合式 API,已經(jīng)成為了現(xiàn)代前端開發(fā)的重要工具之一,除了基本用法外,Vue3.x 還提供了許多高級功能,本文將和大家一起深入探索Vue3.x中的七大高級用法,需要的朋友可以參考下
    2024-03-03
  • 關(guān)于vant的日歷組件,在iPhonex上可選日期空白

    關(guān)于vant的日歷組件,在iPhonex上可選日期空白

    這篇文章主要介紹了關(guān)于vant的日歷組件,在iPhonex上可選日期空白，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-04-04

最新評論