<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

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

          2019-7-10    seo達人

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

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


          這里確認按鈕是fixed布局 bottom:0 彈出鍵盤之后按鈕被頂到了鍵盤上面

          網上搜到的解決方案有兩種,

          一種是監聽頁面高度(我采用的這種)

          一種是監聽軟鍵盤事件(ios和安卓實現方式不同,未采用)

          下面是實現代碼

          data() {
              return {
                  docmHeight: document.documentElement.clientHeight ||document.body.clientHeight,
                  showHeight: document.documentElement.clientHeight ||document.body.clientHeight,
                  hideshow:true  //顯示或者隱藏footer
              }
            },
          watch: {
                  //監聽顯示高度
                showHeight:function() {
                    if(this.docmHeight > this.showHeight){
                      //隱藏
                        this.hideshow=false
                    }else{
                      //顯示
                        this.hideshow=true
                    }
                }
            },
          mounted() {
                //監聽事件
                window.onresize = ()=>{
                    return(()=>{
                        this.showHeight = document.documentElement.clientHeight || document.body.clientHeight;
                })()
                }
           
            },
          <div class="bottom" v-show="hideshow">
              <div class="btn">
                確認操作
              </div>
            </div>
          我這里使用的是方法是:當鍵盤彈出時,將按鈕隱藏。如果必須出現按鈕的話,可以修改按鈕回歸到正常的流中。
          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合