vue 手機(jī)鍵盤把底部按鈕頂上去

jiekechoo 發(fā)布于2019-08-22 16:05 / 1081人閱讀

摘要：背景在寫提交訂單頁面時候，底部按鈕當(dāng)我點(diǎn)擊輸入留言信息的時候，底部提交訂單按鈕被輸入法軟鍵盤頂上去遮擋住了。原來的樣式主要是當(dāng)輸入法點(diǎn)擊出現(xiàn)時候修改為綁定動態(tài)，，通過來顯示動態(tài)顯示，初始值設(shè)置另外設(shè)置初始屏幕高度變化屏幕高度。

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

實現(xiàn)原理：當(dāng)頁面高度發(fā)生變化的時候改變底部button的樣式，沒點(diǎn)擊前button在底部固定
position: fixed;當(dāng)我點(diǎn)擊input的時候樣式變成position: static!important;

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

原來的樣式主要是position: fixed;當(dāng)輸入法點(diǎn)擊出現(xiàn)時候修改為 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綁定動態(tài)class，‘nav-hide’ ，通過hideClass來顯示動態(tài)顯示，
初始值設(shè)置hideClass: false,
另外設(shè)置初始屏幕高度 docmHeight,變化屏幕高度 showHeight 。

//其他代碼
  
        合計：¥{{totalFee}}
        提交訂單
   
//其他代碼

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

data(){
    retrun{
         // 默認(rèn)屏幕高度
        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監(jiān)聽頁面高度的變化
         window.onresize = () => {
            return (() => {
               window.screenHeight = document.body.clientHeight;
               this.showHeight = window.screenHeight;
            })()
         }
      }

方法二

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

保存并使用

.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;
}

如果大家有更好的方法希望能夠交流學(xué)習(xí)

微信6.7.4 IOS12 手機(jī)鍵盤收縮后白屏問題

加directive

Vue.directive("resetPage", {
  inserted: function(el) {
    // 監(jiān)聽鍵盤收起事件
    document.body.addEventListener("focusout", () => {
      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        // 軟鍵盤收起的事件處理
        setTimeout(() => {
          const scrollHeight =
            document.documentElement.scrollTop || document.body.scrollTop || 0
          window.scrollTo(0, Math.max(scrollHeight - 1, 0))
        }, 100)
      }
    })
  }
})

input添加 v-reset-page