vue 解決移動端彈出鍵盤導(dǎo)致頁面fixed布局錯亂的問題
更新時間：2019年11月06日 15:40:14 作者：涼_風(fēng)有信
今天小編就為大家分享一篇vue 解決移動端彈出鍵盤導(dǎo)致頁面fixed布局錯亂的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
話不多說，直接上問題圖片
這里確認(rèn)按鈕是fixed布局 bottom:0 彈出鍵盤之后按鈕被頂?shù)搅随I盤上面
網(wǎng)上搜到的解決方案有兩種，
一種是監(jiān)聽頁面高度（我采用的這種）
一種是監(jiān)聽軟鍵盤事件（ios和安卓實(shí)現(xiàn)方式不同，未采用）
下面是實(shí)現(xiàn)代碼
data() {
return {
docmHeight: document.documentElement.clientHeight ||document.body.clientHeight,
showHeight: document.documentElement.clientHeight ||document.body.clientHeight,
hideshow:true //顯示或者隱藏footer
}
},
watch: {
//監(jiān)聽顯示高度
showHeight:function() {
if(this.docmHeight > this.showHeight){
//隱藏
this.hideshow=false
}else{
//顯示
this.hideshow=true
}
}
},
mounted() {
//監(jiān)聽事件
window.onresize = ()=>{
return(()=>{
this.showHeight = document.documentElement.clientHeight || document.body.clientHeight;
})()
}
},
<div class="bottom" v-show="hideshow">
<div class="btn">
確認(rèn)操作
</div>
</div>
我這里使用的是方法是：當(dāng)鍵盤彈出時，將按鈕隱藏。如果必須出現(xiàn)按鈕的話，可以修改按鈕回歸到正常的流中。
以上這篇vue 解決移動端彈出鍵盤導(dǎo)致頁面fixed布局錯亂的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue yaml代碼編輯器組件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue3.0 自適應(yīng)不同分辨率電腦的操作,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-02
Vue實(shí)現(xiàn)用戶自定義字段顯示數(shù)據(jù)的方法
今天小編就為大家分享一篇Vue實(shí)現(xiàn)用戶自定義字段顯示數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue中.$mount('#app')手動掛載操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Axios提供了簡單而強(qiáng)大的API來處理HTTP請求,而FormData提供了用于構(gòu)建表單數(shù)據(jù)的API,這篇文章主要介紹了Vue中如何使用Axios發(fā)送FormData請求,需要的朋友可以參考下2024-07-07
基于vue.js輪播組件vue-awesome-swiper實(shí)現(xiàn)輪播圖
一般做移動端輪播圖的時候，最常用的就是Swiper插件了，而vue.js也有一個輪播組件vue-awesome-swiper，用法跟swiper相似。接下來通過本文給大家詳解講解vue.js輪播組件vue-awesome-swiper實(shí)現(xiàn)輪播圖實(shí)例代碼，需要的朋友參考下2017-03-03
vue3中echarts的tooltip組件不顯示問題及解決
這篇文章主要介紹了vue3中echarts的tooltip組件不顯示問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
ue-bus 提供了一個全局事件中心，并將其注入每一個組件，你可以像使用內(nèi)置事件流一樣方便的使用全局事件。這篇文章給大家介紹了vue bus全局事件中心簡單Demo，需要的朋友參考下吧2018-02-02
在前后端分離項(xiàng)目中,跨域是一定會出現(xiàn)的問題,下面這篇文章主要給大家介紹了關(guān)于Vue學(xué)習(xí)筆記之跨域的6種解決方案,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
Vue+Element UI實(shí)現(xiàn)下拉菜單的封裝
這篇文章主要為大家詳細(xì)介紹了Vue+Element UI實(shí)現(xiàn)下拉菜單的封裝代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09