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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。