Skip to content

BubbleList 气泡列表

智能聊天滚动容器组件,专为对话场景设计。

功能特性

  • 📜 自动滚动 - 内容增加时自动滚动到底部,确保最新消息可见
  • 🔝 快捷导航 - 支持一键滚动到顶部、底部或指定位置
  • 🔘 智能提示 - 用户向上滚动查看历史消息时,自动显示"返回底部"按钮
  • 🎨 高度定制 - 支持自定义返回按钮样式和触发阈值

基础用法

自定义高级用法

props

属性名说明类型默认值
bottomThreshold判定为"已滚动到底部"的距离阈值(px)number30

ref

通过 ref 可以获取到组件实例并调用以下方法:

方法名说明参数
scrollToBottom滚动到底部(smooth?: string)
scrollToTop滚动到顶部(smooth?: string)
scrollToIndex滚动到指定位置(index: number, smooth?: string)

slot

插槽名说明作用域参数
default列表内容区域-
bottom-action自定义返回底部按钮{ scrollToBottom, scrollToTop, scrollToIndex }