vue如何解決移動(dòng)端彈出鍵盤(pán)導(dǎo)致頁(yè)面fixed布局錯(cuò)亂的問(wèn)題

這篇文章將為大家詳細(xì)講解有關(guān)vue如何解決移動(dòng)端彈出鍵盤(pán)導(dǎo)致頁(yè)面fixed布局錯(cuò)亂的問(wèn)題，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

問(wèn)題圖片

這里確認(rèn)按鈕是fixed布局 bottom:0 彈出鍵盤(pán)之后按鈕被頂?shù)搅随I盤(pán)上面

網(wǎng)上搜到的解決方案有兩種，

一種是監(jiān)聽(tīng)頁(yè)面高度（我采用的這種）

一種是監(jiān)聽(tīng)軟鍵盤(pá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)聽(tīng)顯示高度
   showHeight:function() {
     if(this.docmHeight > this.showHeight){
      //隱藏
       this.hideshow=false
     }else{
      //顯示
       this.hideshow=true
     }
   }
 },
mounted() {
   //監(jiān)聽(tīng)事件
   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)鍵盤(pán)彈出時(shí)，將按鈕隱藏。如果必須出現(xiàn)按鈕的話，可以修改按鈕回歸到正常的流中。

關(guān)于“vue如何解決移動(dòng)端彈出鍵盤(pán)導(dǎo)致頁(yè)面fixed布局錯(cuò)亂的問(wèn)題”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。