移动端解决键盘弹出时底部fixed定位被顶上去

移动端解决软键盘弹出时底部fixed定位被顶上去的问题

移动端页面的底部菜单栏，通常会使用fixed定位在底部。在安卓手机上经常会出现软键盘弹出时，底部定位被顶上去，下面提供vue和jQuery两种解决办法。

vue.js代码

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

复制代码

1. // js 部分
   
2. data(){
   
3.   return {
   
4.     docmHeight: document.documentElement.clientHeight,  //默认屏幕高度
   
5.         showHeight: document.documentElement.clientHeight,   //实时屏幕高度
   
6.         hideshow:true,  //显示或者隐藏footer
   
7.   }
   
8. },
   
9. mounted() {
   
10.   // window.onresize监听页面高度的变化
    
11.   window.onresize = ()=>{
    
12.     return(()=>{
    
13.       this.showHeight = document.body.clientHeight;
    
14.     })()
    
15.   }
    
16. },
    
17. //监听
    
18. watch:{
    
19.   showHeight:function() {
    
20.     if(this.docmHeight > this.showHeight){
    
21.       this.hideshow=false
    
22.     }else{
    
23.       this.hideshow=true
    
24.     }
    
25.   }
    
26. },
    
27. 
    

复制代码

jQuery代码

1. var winHeight = $(window).height();  //获取当前页面高度
   
2. $(window).resize(function () {
   
3.     var thisHeight = $(this).height();
   
4.     if ( winHeight - thisHeight > 140 ) {
   
5.         //键盘弹出
   
6.         $('.footer').css('position','static');
   
7.     } else {
   
8.         //键盘收起
   
9.         $('.footer').css({'position':'fixed','bottom':'0'});
   
10.         
    
11.     }
    
12. })
    
13. 
    

复制代码