修复方案(请按以下步骤实现)
第一步:MessageInput 组件修复
- 禁用原生键盘顶推 :在
<input>上设置:adjust-position="false",改为手动控制布局 - 监听键盘高度变化 :在组件 mounted / onMounted 中调用
uni.onKeyboardHeightChange - 手动控制 paddingBottom :用一个响应式变量
keyboardHeight存储键盘高度,在最外层容器上绑定动态样式: - 键盘弹出时收起面板 :在键盘高度 > 0 时,设置
showMorePanel = false - 跨组件通知消息列表 :在键盘高度 > 0 时,通过
uni.$emit('键盘高度变化事件名', height)通知 MessageList 组件 - 组件销毁时清理监听 :在 beforeDestroy(Vue2)/ onUnmounted(Vue3)中调用
uni.offKeyboardHeightChange()
第二步:MessageList 组件修复
- 监听键盘事件 :在 mounted / onMounted 中使用
uni.$on('键盘高度变化事件名', callback)监听 - 自动滚动到底部:收到键盘弹出事件后,调用 scrollToBottom
- 修复重复滚动不触发问题:如果使用 scroll-into-view,需要先将目标 ID 清空为 '',等 50ms 后再重新赋值目标消息 ID,确保相同值时也能触发滚动
- 组件销毁时清理 :在 beforeDestroy / onUnmounted 中调用
uni.$off('键盘高度变化事件名')配对注销