uniapp app页面开发软键盘落下后留下空白区域如何解决

在uniapp开发App页面时，当软键盘弹出后收起，页面底部会留下一块空白区域无法自动复原，导致页面布局错乱。尝试过调整page.json的softinputMode配置为adjustResize或adjustPan，但问题依旧存在。请问如何彻底解决这个空白区域问题？需要兼容Android和iOS平台。

2 回复

在pages.json中设置对应页面的style，添加"app-plus": { "softinputMode": "adjustResize" }，可避免键盘弹起后页面底部留白。


在 UniApp 开发中，当软键盘收起后页面留下空白区域，通常是因为页面被键盘顶起后未正确恢复。以下是常见解决方案：

1. 配置 pages.json

在 pages.json 中对应页面的 style 中添加配置：

{
  "path": "pages/your-page",
  "style": {
    "app-plus": {
      "softinputMode": "adjustResize"
    }
  }
}
  • 说明：adjustResize 模式会让页面内容自动调整，键盘收起时恢复原状。适用于大多数场景。

2. 检查页面布局

  • 避免使用 position: fixed 布局，改用 Flex 或普通流布局。
  • 确保内容区域高度自适应，例如使用 min-height 替代固定高度。

3. 监听键盘事件

在页面中通过 uni.onKeyboardHeightChange 监听键盘高度变化，手动调整布局：

onLoad() {
  uni.onKeyboardHeightChange(res => {
    if (res.height === 0) {
      // 键盘收起时，强制滚动到页面顶部或调整布局
      uni.pageScrollTo({ scrollTop: 0, duration: 0 });
    }
  });
}

4. Android 额外配置

  • 在 manifest.json 的 app-plus -> distribute -> android 中添加：
"softinput": {
  "mode": "adjustResize"
}

5. 检查第三方组件

若使用 UI 库（如 uView），确认其输入框组件是否支持自动布局调整。

注意事项：

  • 测试时区分 iOS 和 Android，部分机型可能存在差异。
  • 若问题持续，尝试在键盘收起后调用 uni.hideKeyboard() 强制隐藏。

通过以上方法，可解决大部分键盘收起后留白的问题。

回到顶部