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;
})()
}

},
<div class="bottom" v-show="hideshow">
<div class="btn">
确认操作
</div>
</div>

我这里使用的是方法是：当键盘弹出时，将按钮隐藏。如果必须出现按钮的话，可以修改按钮回归到正常的流中。

以上这篇vue 解决移动端弹出键盘导致页面fixed布局错乱的问题就是小编分享给大家的全部内容了，希望能给大家一个参考

您可能感兴趣的文章:

• 解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
• vue 解决文本框被键盘遮住的问题
• 使用vue实现简单键盘的示例(支持移动端和pc端)
• 微信内置开发 iOS修改键盘换行为搜索的解决方案