问题描述

  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页就不会存在上述问题啦😁
  如果文章中有什么错误或有更好的解决办法亦或是有什么疑问欢迎交流😄