vue 移動端彈出鍵盤導致頁面fixed布局錯亂

2019-7-10    seo達人

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

話不多說，直接上問題圖片


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

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

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

一種是監(jiān)聽軟鍵盤事件（ios和安卓實現(xiàn)方式不同，未采用）

下面是實現(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">
      確認操作
    </div>
  </div>
我這里使用的是方法是：當鍵盤彈出時，將按鈕隱藏。如果必須出現(xiàn)按鈕的話，可以修改按鈕回歸到正常的流中。
藍藍設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務。

分享本文至：

日歷

鏈接

個人資料

存檔