uniapp 跟随键盘

跟随键盘的实现方法

在uniapp中实现输入框跟随键盘弹出的效果，可以通过监听键盘高度变化动态调整布局。

监听键盘高度变化

使用uni.onKeyboardHeightChange方法监听键盘高度变化：

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

动态调整输入框位置

在模板中使用计算样式动态调整输入框位置：

<template>
  <view :style="{paddingBottom: keyboardHeight + 'px'}">
    <input focus />
  </view>
</template>

使用scroll-view优化体验

对于长页面，可以结合scroll-view实现更平滑的滚动效果：

<scroll-view :scroll-y="true" :style="{height: '100vh'}">
  <view :style="{paddingBottom: keyboardHeight + 'px'}">
    <input focus />
  </view>
</scroll-view>

安卓平台特殊处理

安卓平台可能需要额外设置manifest.json：

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

注意事项

• iOS平台默认行为较好，通常不需要额外处理
• 安卓平台需要确保页面布局不会被键盘遮挡
• 测试时需要区分不同机型的键盘高度差异