uniapp 跟随键盘

uniapp 键盘弹出时调整布局的方法

在 uniapp 中实现页面内容跟随键盘弹出调整布局，可通过以下方式实现：

监听键盘高度变化 使用 uni.onKeyboardHeightChange 监听键盘高度变化，动态调整页面布局。示例代码：

uni.onKeyboardHeightChange(res => {
  this.keyboardHeight = res.height
})

设置页面滚动位置 在输入框聚焦时，调用 uni.pageScrollTo 将页面滚动到合适位置：

onFocus() {
  uni.pageScrollTo({
    scrollTop: 200,
    duration: 300
  })
}

使用 CSS 固定布局 在页面底部设置固定区域，通过动态样式调整位置：

.footer {
  position: fixed;
  bottom: 0;
  transition: bottom 0.3s;
}

manifest.json 配置 在 manifest.json 中配置键盘弹出方式：

"app-plus": {
  "softinputMode": "adjustResize"
}

平台差异处理

iOS 特殊处理 iOS 需要额外设置页面滚动行为：

"app-plus": {
  "scrollIndicator": "none",
  "softinputNavBar": "none"
}

Android 适配 确保页面设置正确的窗口模式：

"app-plus": {
  "softinputMode": "adjustPan|adjustResize"
}

常见问题解决方案

输入框被键盘遮挡时，检查页面是否使用了固定定位元素。推荐使用相对布局配合动态计算。

动态调整布局时可能出现闪烁，建议添加过渡动画：

.input-area {
  transition: transform 0.3s ease;
}

对于复杂布局，推荐使用计算属性动态计算位置：

computed: {
  inputMarginBottom() {
    return this.keyboardHeight > 0 ? this.keyboardHeight + 'px' : '0'
  }
}