InfiniteScroll
infinite-scroll无限滚动 · IntersectionObserver 底部哨兵 + 自动定位可滚祖先作 root + 加载锁防重入 + hasMore 完结态(零依赖·分页加载)
用法
滚动到底自动加载
底部哨兵进入视口即调 onLoadMore；返回的 Promise 期间不重复触发。
列表项 1
列表项 2
列表项 3
列表项 4
列表项 5
列表项 6
列表项 7
列表项 8
列表项 9
列表项 10
列表项 11
列表项 12
列表项 13
列表项 14
列表项 15
tsx
<InfiniteScroll onLoadMore={loadMore} hasMore={hasMore}>
{items.map((it) => (
<Row key={it.id} data={it} />
))}
</InfiniteScroll>已到末尾
hasMore={false} 时停止观察并显示完结文案（可用 finishedText 自定义）。
列表项 1
列表项 2
列表项 3
列表项 4
列表项 5
—— 到底了 ——
tsx
<InfiniteScroll onLoadMore={loadMore} hasMore={false} finishedText="—— 到底了 ——">
{items.map((it) => (
<Row key={it.id} data={it} />
))}
</InfiniteScroll>何时用
滚动接近底部时自动拉取下一页、直到 hasMore=false 显示完结文案。零依赖、包住已渲染列表即可。当列表行数大到全量 DOM 卡顿，应改用 VirtualList（仅渲染可见区）并用其 onReachEnd 触发加载；本组件适合行数中等、无需虚拟化的场景。
导入
ts
import { InfiniteScroll } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| hasMore* | boolean | — | 是否还有更多；false 时停止观察并显示完结文案。 |
| threshold | number | 100 | 距底多少 px 提前触发（IntersectionObserver rootMargin）。 |
| className | string | — | — |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onLoadMore* | () => Promise<void>｜void | 触底加载回调；返回 Promise 期间不重复触发。 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children* | ReactNode | 已渲染的列表内容。 |
| loadingText | ReactNode | 加载中文案。 |
| finishedText | ReactNode | 完结文案。 |
禁忌 / 坑
暂无已知坑。onLoadMore 务必返回 Promise（异步加载）——组件靠这个 Promise 的 pending 期做加载锁防重入；返回 void 同步加载则失去防抖，快速滚动可能多次触发。哨兵自动向上寻找可滚动祖先作 IntersectionObserver 的 root，故外层需有明确的 overflow-y-auto 滚动容器，否则退化到视口监听。
相关
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable