欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

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

时间:2021-07-09 08:27:42|栏目:vue|点击:

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

这里确认按钮是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实现动态添加数据滚动条自动滚动到底部的示例代码

栏    目:vue

下一篇:Vue 框架之键盘事件、健值修饰符、双向数据绑定

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

本文地址:http://www.codeinn.net/misctech/154865.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有