解决安卓手机在移动端弹出键盘时把底部按钮顶上去问题（vue）fixed失效

143 阅读 0 评论 95 点赞

我是靠谱客的博主含糊黑猫，这篇文章主要介绍解决安卓手机在移动端弹出键盘时把底部按钮顶上去问题（vue）fixed失效，现在分享给大家，希望可以做个参考。

网上查找的地址链接

移动端软键盘弹出时底部 fixed 定位被顶上去 - 格鲁特baby - 博客园网上的链接

记录一下

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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'});
        
    }
})