之前的項(xiàng)目一直都有這個(gè)問(wèn)題，不管是微信端還是用webview打包成app，今天下定決心要解決這個(gè)問(wèn)題。

經(jīng)測(cè)試發(fā)現(xiàn)，底部菜單（footer）被頂起來(lái)的原因，是手機(jī)開(kāi)啟鍵盤(pán)之后，“瀏覽器”的高度發(fā)生了變化，而底部菜單的position屬性是fixed，所以就出現(xiàn)在底部了。

因此對(duì)應(yīng)的解決方案是，監(jiān)聽(tīng)“瀏覽器”高度，當(dāng)產(chǎn)生變化時(shí)，隱藏底部菜單。

document.body.clientHeight 指的是body對(duì)象高度
document.documentElement.clientHeight 指的是可見(jiàn)區(qū)域高度，此處用它

我用的是vue，將footer封裝了個(gè)組件

先在data里定義幾個(gè)字段

data: function(){
  return {
     screenHeight: document.documentElement.clientHeight,     // 當(dāng)前高度
     originHeight: document.documentElement.clientHeight,     //默認(rèn)高度，用作比較
     isOriginHeight: false    //當(dāng)前高度是否仍等于默認(rèn)高度
  };
}

在html中，通過(guò) isOriginHeight 字段控制隱藏/顯示footer

<div class="footer" v-show="isOriginHeight">
  ...
</div>

在模板掛載完成后，添加【瀏覽器窗口改變時(shí)觸發(fā)函數(shù)】給 screenHeight 字段賦值

mounted() {
  window.onresize = () => {
    return (() => {
      this.screenHeight = document.documentElement.clientHeight;
    })()
   }
}

監(jiān)聽(tīng)watch變化，判斷高度是否改變，改變isOriginHeight 字段

watch: {
   screenHeight (val) {
    if(this.originHeight - val>60) {    //這里以防萬(wàn)一改了下判斷形式，當(dāng)屏幕高度減少了60px以上時(shí)才隱藏footer
      this.isOriginHeight = false;
    }else{
      this.isOriginHeight = true;
    }
  }
}

以上

不用vue的小伙伴可以參考這個(gè)思路

目前為止這個(gè)方法暫時(shí)還沒(méi)遇到問(wèn)題，有遇到問(wèn)題的小伙伴可以評(píng)論交流