Vue解决微信浏览器input关闭键盘后导致页面底部空缺的问题

前端阿皓

于 2020-04-07 20:36:39 发布

阅读量1.3k

点赞数 2

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/TanHao8/article/details/105372951

版权

Vue 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了在微信环境下，H5页面输入框唤起软键盘导致页面布局异常的问题，并提供了三种解决方案，包括自动置顶、scrollTo调整及定位滚动至input位置的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导致原因：

是微信webview打开我们h5页面的时候，就固定了页面的高度，如果这个input在页面的底部，当唤起软键盘的时候，由于高度问题，整个webview会被键盘顶上去，，而取消的时候没有恢复原状。

解决办法

第一种：失去焦点后自动置顶

inputLoseFocus() {
  setTimeout(() => {
    window.scrollTo(0, 0);
  }, 100);
},

第二种：使scrollTo回到底部

inputLoseFocus() {
  setTimeout(() => {
    const scrollHeight = document.documentElement.scrollHeight
      || document.body.scrollHeight;
    window.scrollTo({
      top: scrollHeight,
      behavior: 'smooth',
    });
  }, 100);
}

第三种：计算当前input距离顶部的高度，使页面滚动到当前位置

inputLoseFocus() {
 console.log(`window.pageYOffset: ${window.pageYOffset}`);
  window.scrollTo({
    top: window.pageYOffset,
    behavior: 'smooth',
  });
}