vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
话不多说，直接上问题图片
这里确认按钮是fixed布局bottom:0弹出键盘之后按钮被顶到了键盘上面
网上搜到的解决方案有两种，
一种是监听页面高度（我采用的这种）
一种是监听软键盘事件（ios和安卓实现方式不同，未采用）
下面是实现代码
data(){
return{
docmHeight:document.documentElement.clientHeight||document.body.clientHeight,
showHeight:document.documentElement.clientHeight||document.body.clientHeight,
hideshow:true//显示或者隐藏footer
}
},
watch:{
//监听显示高度
showHeight:function(){
if(this.docmHeight>this.showHeight){
//隐藏
this.hideshow=false
}else{
//显示
this.hideshow=true
}
}
},
mounted(){
//监听事件
window.onresize=()=>{
return(()=>{
this.showHeight=document.documentElement.clientHeight||document.body.clientHeight;
})()
}
},
确认操作
我这里使用的是方法是：当键盘弹出时，将按钮隐藏。如果必须出现按钮的话，可以修改按钮回归到正常的流中。
以上这篇vue解决移动端弹出键盘导致页面fixed布局错乱的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。