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;
}
}
作者:kuke_kuke
来源:CSDN
原文:https://blog.csdn.net/qq_33599109/article/details/79086411