Preview Updated 2026-05-10

InfiniteScroll

Auto-loads the next page when scrolled to the bottom; based on IntersectionObserver.

Basic usage

Place the list inside the component slot. When the bottom sentinel enters the viewport (threshold pixels in advance), load fires. loading suppresses repeat triggers, and finished shows “no more results”.

第 1 项
第 2 项
第 3 项
第 4 项
第 5 项
第 6 项
第 7 项
第 8 项
第 9 项
第 10 项
第 11 项
第 12 项

<CfInfiniteScroll :loading="loading" :finished="finished" @load="loadMore">
<ul>...</ul>
</CfInfiniteScroll>

<CfInfiniteScroll loading={loading} finished={finished} onLoad={loadMore}>
<ul>...</ul>
</CfInfiniteScroll>

API

Prop	Type	Default	Description
`loading`	`boolean`	`false`	Loading; `load` will not fire while true
`finished`	`boolean`	`false`	No more data
`threshold`	`number`	`100`	Fire when the sentinel is N pixels away from entering the viewport (rootMargin)

Events: onLoad() — load the next batch in the handler.

Slots (Vue): loading / finished for custom bottom hint text.