之前的項(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)論交流