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

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

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

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

立即学习“前端免费学习笔记（深入）”；

代码示例：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

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 系统可能会导致微妙的行为差异。因此，根据实际情况调整代码并进行测试非常重要。