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

jiekechoo 發布于2019-08-22 16:05 / 1092人閱讀

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

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

實現原理：當頁面高度發生變化的時候改變底部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 。

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

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，也解決了這個問題;

保存并使用

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

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

微信6.7.4 IOS12 手機鍵盤收縮后白屏問題

加directive

Vue.directive("resetPage", {
  inserted: function(el) {
    // 監聽鍵盤收起事件
    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

GPU云服務器云服務器頂上去底部按鈕服務器底部按鈕是什么手機底部js特效

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/94041.html

第八集: 從零開始實現一套pc端vue的ui組件庫(input, textarea組件)

摘要：第八集從零開始實現輸入框組件本集定位組件是交互的一大利器他與用戶的交流最為密切所以奠定了他在組件界的重要地位也算是一種如果可以的話本集也會一起說完畢竟是一個類型的一起學完收獲會很大古人云組件不封輸入框，一到面試就發慌一簡介大家如果對這個第八集: 從零開始實現(輸入框input,textarea組件) 本集定位: input組件是交互的一大利器, 他與用戶的交流最為密切, 所以奠...

binaryTree 2019-08-30 15:44 評論0 收藏0
第八集: 從零開始實現一套pc端vue的ui組件庫(input, textarea組件)

摘要：第八集從零開始實現輸入框組件本集定位組件是交互的一大利器他與用戶的交流最為密切所以奠定了他在組件界的重要地位也算是一種如果可以的話本集也會一起說完畢竟是一個類型的一起學完收獲會很大古人云組件不封輸入框，一到面試就發慌一簡介大家如果對這個第八集: 從零開始實現(輸入框input,textarea組件) 本集定位: input組件是交互的一大利器, 他與用戶的交流最為密切, 所以奠...

chanthuang 2019-08-26 10:33 評論0 收藏0
手機軟鍵盤彈起導致頁面變形的一種解決方案

摘要：最近用一種第三方開發框架開發，其中一個頁面有十幾個輸入框，在點擊輸入時，軟鍵盤彈起，導致頁面往上頂，底部的按鈕也全部彈到頁面上面去了，布局全被打亂。等輸入完，軟鍵盤收起時，頁面恢復原狀。最近用 uniapp（一種第三方 app 開發框架）開發 app，其中一個頁面有十幾個 input 輸入框，在點擊 input 輸入時，軟鍵盤彈起，導致頁面往上頂，底部的按鈕也全部彈到頁面上面去了，...

X_AirDu 2019-08-23 17:05 評論0 收藏0
移動端頁面小bug

摘要：滑動時頁面警告解決方法不支持的解決辦法姓名身份證號碼重點在于給設置高度和偽元素微信去掉底部返回橫條問題框自動填充內容背景顏色為黃色設置文字不居中設置間距和等值即可滑動時頁面警告 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as pas...

winterdawn 2019-08-02 16:11 評論0 收藏0
移動端頁面小bug

摘要：滑動時頁面警告解決方法不支持的解決辦法姓名身份證號碼重點在于給設置高度和偽元素微信去掉底部返回橫條問題框自動填充內容背景顏色為黃色設置文字不居中設置間距和等值即可滑動時頁面警告 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as pas...

legendmohe 2019-08-23 16:44 評論0 收藏0