今天小编就为大家分享一篇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 v-show="hideshow"> <div> 确认操作 </div> </div>
我这里使用的是方法是：当键盘弹出时，将按钮隐藏。如果必须出现按钮的话，可以修改按钮回归到正常的流中。
以上这篇vue 解决移动端弹出键盘导致页面fixed布局错乱的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: