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

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

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

解決辦法

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

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

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ǔ)充知識：解決使用vue時頁面內(nèi)有彈窗時禁止頁面滾動以及頁面內(nèi)彈窗因絕對定位導(dǎo)致頁面壓縮的問題

如下所示：

@touchmove.prevent

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

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

// 動態(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ù)值的變化，來控制底部導(dǎo)航欄的出現(xiàn)與隱藏

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

您可能感興趣的文章:

相關(guān)文章

Vue.js 2.0學(xué)習(xí)教程之從基礎(chǔ)到組件詳解
這篇文章主要介紹了Vue.js 2.0從基礎(chǔ)到組件的相關(guān)資料，文中介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue.js具有一定的參考價值，需要的朋友可以參考學(xué)習(xí)，下面來一起看看吧。
2017-04-04
vue項目刷新當(dāng)前頁面的三種方式(重載當(dāng)前頁面數(shù)據(jù))
這篇文章主要介紹了vue項目刷新當(dāng)前頁面的三種方式(重載當(dāng)前頁面數(shù)據(jù)),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-01-01
Vue學(xué)習(xí)之路之登錄注冊實(shí)例代碼
本篇文章主要介紹了Vue學(xué)習(xí)之路之登錄注冊實(shí)例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
Vue實(shí)現(xiàn)簡單網(wǎng)頁計算器
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡單網(wǎng)頁計算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
使用vue制作滑動標(biāo)簽
這篇文章主要為大家詳細(xì)介紹了使用vue制作滑動標(biāo)簽，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-09-09
基于vue2框架的機(jī)器人自動回復(fù)mini-project實(shí)例代碼
本篇文章主要介紹了基于vue2框架的機(jī)器人自動回復(fù)mini-project實(shí)例代碼，具有一定的參考價值，有興趣的可以了解一下
2017-06-06
vue引入新版 vue-awesome-swiper插件填坑問題
這篇文章主要介紹了vue引入新版 vue-awesome-swiper插件填坑問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-01-01
Vue package.json配置深入分析
這篇文章主要介紹了Vue package.json配置，package.json是每個前端項目都會有的json文件，位于項目的根目錄中。很多腳手架在創(chuàng)建項目的時候會幫我們自動初始化好 package.json
2023-01-01
vue使用Swiper踩坑解決避坑
這篇文章主要為大家介紹了vue使用Swiper踩坑及解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
vue兩個輸入框聯(lián)動校驗方式(最大值-最小值)
這篇文章主要介紹了vue兩個輸入框聯(lián)動校驗方式(最大值-最小值)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10