vue 解决移动端弹出键盘导致页面fixed布局错乱的问题

话不多说，直接上问题图片这里确认按钮是fixed布局bottom:0弹出键盘之后按钮被顶到了键盘

话不多说，直接上问题图片

这里确认按钮是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布局错乱的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。