返回

一劳永逸！告别uni-app底部input乱蹦跶

前端

解决 uni-app 微信小程序底部输入框键盘遮挡问题：页面不动，输入框上移

在使用 uni-app 开发微信小程序时，当页面底部放置一个 input 输入框时，键盘弹起时，页面整体都会跟着上移，导致输入框被键盘遮挡，严重影响用户输入体验。本文将介绍如何解决这个问题，实现当键盘弹起时，页面整体保持不动，只有输入框向上移动，露出完整的输入区域。

问题详情

当我们在 uni-app 微信小程序中，在页面底部放置一个 input 输入框时，当用户点击输入框，键盘弹起时，整个页面都会跟着上移，导致输入框被键盘遮挡，如下图所示：

图片

解决方法

为了解决这个问题，我们需要实现的效果是：当键盘弹起时，页面整体保持不动，只有输入框向上移动，露出完整的输入区域，如下图所示：

图片

代码实现

在解决这个问题之前，我们需要先了解 uni-app 的事件系统。在 uni-app 中，有一个 onPageScroll 事件，可以监听页面滚动事件。当页面滚动时，这个事件就会被触发。

因此，我们可以通过监听 onPageScroll 事件，来判断键盘是否弹起。如果键盘弹起，我们就将页面的高度减去键盘的高度，这样就可以保证页面整体保持不动，只有输入框向上移动。

下面是具体代码实现：

App.vue

在 App.vue 文件中，添加以下代码：

export default {
  data() {
    return {
      windowHeight: 0,
      adjustHeight: false,
    }
  },
  onLoad() {
    wx.getSystemInfo({
      success: (res) => {
        this.windowHeight = res.windowHeight
      }
    })
  },
  onPageScroll(e) {
    if (e.scrollTop > this.windowHeight) {
      this.adjustHeight = true;
    } else {
      this.adjustHeight = false;
    }
  }
}

页面 .vue 文件

在页面的 .vue 文件中，添加以下代码：

<view :style="{height: adjustHeight ? 'calc(100vh - 100px)' : '100vh'}">
  <!-- 其他内容 -->
</view>

这样，当键盘弹起时，页面整体就会保持不动，只有输入框向上移动，露出完整的输入区域了。

结语

本文介绍了如何解决 uni-app 微信小程序底部输入框键盘遮挡问题，通过监听 onPageScroll 事件，我们可以判断键盘是否弹起，从而调整页面的高度，保证页面整体保持不动，只有输入框向上移动。希望这篇文章能够帮助到大家。

常见问题解答

1. 为什么我的输入框还是被键盘遮挡？

答：请确保你已经正确地实现了代码，并且在 App.vue 文件中监听了 onPageScroll 事件。

2. 如何调整键盘弹起的距离？

答：可以在 calc(100vh - 100px) 中调整 100px 的值，以调整键盘弹起的距离。

3. 如何在不同的页面使用这个解决方案？

答：可以在每个页面的 onPageScroll 事件中添加上述代码，以实现同样的效果。

4. 有没有其他方法可以解决这个问题？

答：还有其他方法可以解决这个问题，例如使用 CSS 的 position: fixed 属性，但推荐使用本文介绍的方法，因为它更稳定可靠。

5. 这个解决方案适用于所有 uni-app 版本吗？

答：本文介绍的解决方案适用于 uni-app 的所有版本。