h5软键盘弹起 底部按钮被顶起问题解决

时间:2021-03-14 03:42:31

解决思路:
当键盘弹起时隐藏掉按钮,键盘隐藏时按钮显示
监测键盘是否弹起(浏览器页面是否发生变化)
代码:
1、定义一个底部按钮

<div class="returnbtn" v-show="isOriginHei" :class="{active: canSubmit}" v-on:click="sendSubmit()">提交</div>

2、设置默认显示和两个屏幕的初始值(此处定义在vue的data中)

  isOriginHei: true,
  screenHeight: document.documentElement.clientHeight, //此处也可能是其他获取方法
  originHeight: document.documentElement.clientHeight,

3、在mounted里面挂载检测浏览器变化

  mounted() {
    let self = this;
    window.onresize = function() {
      return (function(){
        self.screenHeight = document.documentElement.clientHeight;
      })()
    }
  }

4、在watch中监测屏幕变化

  screenHeight (val) {
    if(this.originHeight > val + 100) { //加100为了兼容华为的返回键
      this.isOriginHei = false;
    }else{
      this.isOriginHei = true;
    }
  }

作者:kuke_kuke
来源:CSDN
原文:https://blog.csdn.net/qq_33599109/article/details/79086411