微信端 Vue 项目软键盘弹起，页面为何“压缩”？如何解决？

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《微信端 Vue 项目软键盘弹起，页面为何“压缩”？如何解决？》，聊聊，我们一起来看看吧！

微信端 vue 项目软键盘弹起，为何页面“压缩”？

当在微信端打开 vue 项目并输入登录信息时，软键盘弹起后偶尔会出现页面高度变小的问题。

解决方案 1（修改软键盘弹起时的布局）

这种错误并非页面内容被“压缩”，而是页面底部位置固定（例如“position: fixed”）的内容被软键盘顶上来造成。为了解决此问题，可以修改软键盘弹起时的布局，将底部内容切换为隐藏或调整布局。

代码示例：

mounted() {
  window.addeventlistener('resize', () => {
    // 根据经验值确定触发阈值
    if (window.innerheight < xxxxxx) {
      this.$refs.buttonwrap.style.display = "none";
    } else {
      this.$refs.buttonwrap.style.display = "block";
    }
  });
}

解决方案 2（原生 javascript 滚动）

如果布局修改无济于事，还可以尝试以下原生 javascript 滚动解决方法：

代码示例：

window.scrollTo(0, document.body.scrollHeight - originHeight);

此方法将页面滚动到底部，确保底部内容可见。

提示：

值得注意的是，不同机型和 android/ios 系统可能会导致微妙的行为差异。因此，根据实际情况调整代码并进行测试非常重要。

理论要掌握，实操不能落！以上关于《微信端 Vue 项目软键盘弹起，页面为何“压缩”？如何解决？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！