移動端軟鍵盤彈出時底部 fixed 定位被頂上去

移動端解決軟鍵盤彈出時底部fixed定位被頂上去的問題

移動端頁面的底部菜單欄，通常會使用fixed定位在底部。在安卓手機上經常會出現軟鍵盤彈出時，底部定位被頂上去，下面提供vue和jQuery兩種解決辦法。

vue.js代碼

<!--html部分-->
<div class="footer" v-show="hideshow"></div>

// js 部分
data(){
  return {
    docmHeight: window.innerHeight,  //默認屏幕高度
	showHeight: window.innerHeight,   //實時屏幕高度
	hideshow:true,  //顯示或者隱藏footer
  }
},
mounted() {
  // window.onresize監聽頁面高度的變化
  window.onresize = ()=>{
    return(()=>{
      this.showHeight = window.innerHeight;
    })()
  }
},
//監聽
watch:{
  showHeight: function(newValue) {
    if(this.docmHeight > newValue){
      this.hideshow = false
    }else{
      this.hideshow = true
    }
  }
},

 jQuery代碼

var winHeight = $(window).height();  //獲取當前頁面高度
$(window).resize(function () {
    var thisHeight = $(this).height();
    if ( winHeight - thisHeight > 140 ) {
        //鍵盤彈出
        $('.footer').css('position','static');
    } else {
        //鍵盤收起
        $('.footer').css({'position':'fixed','bottom':'0'});
        
    }
})

 

 

 

https://blog.csdn.net/Tessa_zzl/article/details/89680315