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

解决思路： 
当键盘弹起时隐藏掉按钮，键盘隐藏时按钮显示 
监测键盘是否弹起（浏览器页面是否发生变化） 
代码： 
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;
　　}
}

 

作者：rookie.he（kuke_kuke） 
博客链接：http://blog.youkuaiyun.com/qq_33599109