vue 手機鍵盤把底部按鈕頂上去

背景：在寫提交訂單頁面時候，底部按鈕當我點擊輸入留言信息的時候，
底部提交訂單按鈕被輸入法軟鍵盤頂上去遮擋住了。

h5 ios輸入框與鍵盤 兼容性優化

實現原理：當頁面高度發生變化的時候改變底部button的樣式，沒點擊前button在底部固定
position: fixed;當我點擊input的時候樣式變成position: static!important;

一開始的解決方案是通過input的聚焦和失焦，但是有個問題，當我點擊input的時候聚焦，
再點擊鍵盤上的隱藏按鈕時就沒辦法恢復原來的fixed。

原來的樣式主要是position: fixed;當輸入法點擊出現時候修改為 position: static!important;

 .payOnline {
         position: fixed;
         bottom: 0;
         left: 0;
         right: 0;
         width: 100%;
         background: #fff;
         font-size: 17px;    
      }
       .nav-hide {
         position: static!important;
      }

vue綁定動態class，‘nav-hide’ ，通過hideClass來顯示動態顯示，
初始值設置hideClass: false,
另外設置初始屏幕高度 docmHeight,變化屏幕高度 showHeight 。

//其他代碼
  <div class="payOnline" v-bind:class="{  'nav-hide': hideClass }">
        <span>合計：¥{{totalFee}}</span>
        <div class="payBtn" @click="submitOrder">提交訂單</div>
   </div>
//其他代碼

watch 監聽showHeight，當頁面高度發生變化時候，觸發inputType方法,
window.onresize 事件在 vue mounted 的時候 去掛載一下它的方法,
以便頁面高度發生變化時候更新showHeight

data(){
    retrun{
         // 默認屏幕高度
        docmHeight: document.documentElement.clientHeight,  //一開始的屏幕高度
        showHeight: document.documentElement.clientHeight,   //一開始的屏幕高度
        hideClass: false,
    }
},
 
watch:{
  showHeight: 'inputType'  
}
methods: {
     // 檢測屏幕高度變化
     inputType() {
        if (!this.timer) {
           this.timer = true
           let that = this
           setTimeout(() => {
              if (that.docmHeight > that.showHeight) {
              //顯示class
                 this.hideClass = true;
              } else if (that.docmHeight <= that.showHeight) {
               //顯示隱藏
                 this.hideClass = false;
              }
              that.timer = false;
           }, 20)
        }
     },
},
 mounted() {
         // window.onresize監聽頁面高度的變化
         window.onresize = () => {
            return (() => {
               window.screenHeight = document.body.clientHeight;
               this.showHeight = window.screenHeight;
            })()
         }
      }

方法二

另外還有一種解決方案就是不要將按鈕固定到底部，簡單粗暴適合對ui要求不高的前端頁面，例如原來我的保存地址按鈕是固定在底部的，出現上面的問題后我把樣式修改了一下，取消fixed定位，加了margin，也解決了這個問題;

<div data-v-46aeadee="" class="save-address">保存並使用</div>

.address-from  {
    bottom: .2rem;
    width: 70%;
    text-align: center;
    padding: 10px 0;
    background: #f23030;
    font-size: 16px;
    color: #fff;
    margin: 1.5rem;
    border-radius: 2px;
}

如果大家有更好的方法希望能夠交流學習

原文地址：https://segmentfault.com/a/1190000014228563