超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

vue 移動(dòng)端彈出鍵盤導(dǎo)致頁面fixed布局錯(cuò)亂

2019-7-10    seo達(dá)人

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

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


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

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

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

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

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

分享本文至：

日歷

鏈接

個(gè)人資料

存檔