鸿蒙next 版本在软键盘弹出后，当输入完成隐藏时，页面的高度由于被之前的软键盘挤压而没有恢复，导致页面显示有问题

鸿蒙next 版本在软键盘弹出后，当输入完成隐藏时，页面的高度由于被之前的软键盘挤压而没有恢复，导致页面显示有问题

3 回复

我们也遇到了

更多关于鸿蒙next 版本在软键盘弹出后，当输入完成隐藏时，页面的高度由于被之前的软键盘挤压而没有恢复，导致页面显示有问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题在 Alpha 上修复过，使用最新的 Alpha 版本，试一下。如果仍有问题，提供一个单页面源码

这是一个鸿蒙next版本中常见的键盘弹起/收起导致的布局问题。主要原因是在键盘收起时，页面高度没有正确恢复。

解决方案建议：

  1. 使用onKeyboardHeightChange事件监听键盘高度变化：
uni.onKeyboardHeightChange(res => {
  if(res.height === 0) {
    // 键盘收起时恢复页面布局
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 300
    })
  }
})

  1. 检查页面CSS样式，确保没有固定高度或overflow:hidden等可能影响布局恢复的样式。

  2. 在manifest.json中配置键盘模式：

"app-plus": {
  "softinputMode": "adjustResize"
}
  1. 对于特定页面，可以在onHide生命周期中手动重置页面位置：
onHide() {
  uni.pageScrollTo({
    scrollTop: 0,
    duration: 0
  })
}
回到顶部