移动端解决输入框唤起键盘时将底部导航栏顶起问题总结

问题描述

  vue基于vant框架开发移动端项目时,出现了这样一个问题:在手机上点击页面输入框时唤起手机自带键盘,结果底部固定的导航栏也被顶起,导致遮挡住页面部分内容

解决办法

  这篇文章给出了解决办法解决移动端软键盘弹起底部固定布局被顶上去问题和屏幕背景被压缩问题
  我在本地模拟测试了此方法,是可以解决掉底部被顶起问题,但是在我的某一个项目中,此方法并不能完全解决底部导航栏被顶起问题。究其原因,是我的项目中存在tab标签页,并且底部导航栏是被封装为一个通用组件使用的,当键盘被唤起时需要在页面内使用动态样式(:class="判断条件(一般是三目运算符)")动态的监听高度并减去底部导航栏的固定高度(一般默认的都是50px),可使用计算高度如height: cale(100vh - 50px);(具体计算高度需要根据实际情况计算)。到这一步,基本上是解决了这个项目的键盘唤起底部被顶起的问题。
  但是还存在一个问题,当键盘被唤起后,我并没有收起键盘就去切换tab页,这时候你就会发现底部导航栏还是会有被顶起的现象,并且是一个高度为50px的空白区域,这是因为键盘未收起时就切换tab页,此时的this.originalHeight = document.documentElement.clientHeight;的值还是键盘唤起后的高度,这并不是我们想要的值,不过我们并没有办法改变document.documentElement.clientHeight,所以我们只能想别的办法,我当时解决的办法是在进入应用时就向sessionStorage中存入可视区域高度document.documentElement.clientHeight,其他页面初始化时this.originalHeight的值从存储中获取,这样当没有收起键盘就切换tab页就不会存在上述问题啦😁
  如果文章中有什么错误或有更好的解决办法亦或是有什么疑问欢迎交流😄

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

这都能重名?!

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值