vue移動(dòng)端彈起蒙層滑動(dòng)禁止底部滑動(dòng)操作
解決辦法
在蒙層彈起的時(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)操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- vue移動(dòng)端的左右滑動(dòng)事件詳解
- vue移動(dòng)端實(shí)現(xiàn)手機(jī)左右滑動(dòng)入場(chǎng)動(dòng)畫
- Vue實(shí)現(xiàn)移動(dòng)端左右滑動(dòng)效果的方法
- vue2.0移動(dòng)端滑動(dòng)事件vue-touch的實(shí)例代碼
- 移動(dòng)端滑動(dòng)切換組件封裝 vue-swiper-router實(shí)例詳解
- vue自定義移動(dòng)端touch事件之點(diǎn)擊、滑動(dòng)、長(zhǎng)按事件
- 寫一個(gè)移動(dòng)端慣性滑動(dòng)&回彈Vue導(dǎo)航欄組件 ly-tab
- vue2.0 better-scroll 實(shí)現(xiàn)移動(dòng)端滑動(dòng)的示例代碼
- vue實(shí)現(xiàn)一個(gè)移動(dòng)端屏蔽滑動(dòng)的遮罩層實(shí)例
- vue移動(dòng)端實(shí)現(xiàn)手指滑動(dòng)效果
相關(guān)文章
Vue.js 2.0學(xué)習(xí)教程之從基礎(chǔ)到組件詳解
這篇文章主要介紹了Vue.js 2.0從基礎(chǔ)到組件的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue.js具有一定的參考價(jià)值，需要的朋友可以參考學(xué)習(xí)，下面來一起看看吧。2017-04-04
vue項(xiàng)目刷新當(dāng)前頁面的三種方式(重載當(dāng)前頁面數(shù)據(jù))
這篇文章主要介紹了vue項(xiàng)目刷新當(dāng)前頁面的三種方式(重載當(dāng)前頁面數(shù)據(jù)),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
Vue學(xué)習(xí)之路之登錄注冊(cè)實(shí)例代碼
本篇文章主要介紹了Vue學(xué)習(xí)之路之登錄注冊(cè)實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
Vue實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁計(jì)算器
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細(xì)介紹了使用vue制作滑動(dòng)標(biāo)簽，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
基于vue2框架的機(jī)器人自動(dòng)回復(fù)mini-project實(shí)例代碼
本篇文章主要介紹了基于vue2框架的機(jī)器人自動(dòng)回復(fù)mini-project實(shí)例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下2017-06-06
vue引入新版 vue-awesome-swiper插件填坑問題
這篇文章主要介紹了vue引入新版 vue-awesome-swiper插件填坑問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了Vue package.json配置，package.json是每個(gè)前端項(xiàng)目都會(huì)有的json文件，位于項(xiàng)目的根目錄中。很多腳手架在創(chuàng)建項(xiàng)目的時(shí)候會(huì)幫我們自動(dòng)初始化好 package.json2023-01-01
這篇文章主要為大家介紹了vue使用Swiper踩坑及解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
vue兩個(gè)輸入框聯(lián)動(dòng)校驗(yàn)方式(最大值-最小值)
這篇文章主要介紹了vue兩個(gè)輸入框聯(lián)動(dòng)校驗(yàn)方式(最大值-最小值)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10