移動(dòng)端頁(yè)面的底部菜單欄屎暇，通常會(huì)使用fixed定位在底部。在安卓手機(jī)上經(jīng)常會(huì)出現(xiàn)軟鍵盤彈出時(shí)，底部定位被頂上去后德，下面提供vue和jQuery兩種解決辦法。
vue解決方法
<!--html部分-->
<div class="footer" v-show="hideshow"></div>
// js 部分
data(){
return {
docmHeight: document.documentElement.clientHeight, //默認(rèn)屏幕高度
showHeight: document.documentElement.clientHeight, //實(shí)時(shí)屏幕高度
hideshow:true, //顯示或者隱藏footer
}
},
mounted() {
// window.onresize監(jiān)聽頁(yè)面高度的變化
window.onresize = ()=>{
return(()=>{
this.showHeight = document.body.clientHeight;
})()
}
},
//監(jiān)聽
watch:{
showHeight:function() {
if(this.docmHeight > this.showHeight){
this.hideshow=false
}else{
this.hideshow=true
}
}
}
js解決方案
var winHeight = $(window).height(); //獲取當(dāng)前頁(yè)面高度
$(window).resize(function () {
var thisHeight = $(this).height();
if ( winHeight - thisHeight > 140 ) {
//鍵盤彈出
$('.footer').css('position','static');
} else {
//鍵盤收起
$('.footer').css({'position':'fixed','bottom':'0'});
}
})
