feat(VirtualList): VirtualList now supports pagination, it loads batches when user scrolls near the end of current batch
This commit is contained in:
@@ -84,7 +84,9 @@ interface Props {
|
||||
*
|
||||
* @template T - The type of items in the list
|
||||
*/
|
||||
children: Snippet<[{ item: T; index: number; isVisible: boolean; proximity: number }]>;
|
||||
children: Snippet<
|
||||
[{ item: T; index: number; isVisible: boolean; proximity: number }]
|
||||
>;
|
||||
}
|
||||
|
||||
let {
|
||||
@@ -99,7 +101,7 @@ let {
|
||||
}: Props = $props();
|
||||
|
||||
const virtualizer = createVirtualizer(() => ({
|
||||
count: total,
|
||||
count: items.length,
|
||||
data: items,
|
||||
estimateSize: typeof itemHeight === 'function' ? itemHeight : () => itemHeight,
|
||||
overscan,
|
||||
@@ -109,10 +111,11 @@ $effect(() => {
|
||||
const visibleItems = virtualizer.items.map(item => items[item.index]);
|
||||
onVisibleItemsChange?.(visibleItems);
|
||||
|
||||
// Trigger onNearBottom when user scrolls near the end (within 5 items)
|
||||
// Trigger onNearBottom when user scrolls near the end of loaded items (within 5 items)
|
||||
if (virtualizer.items.length > 0 && onNearBottom) {
|
||||
const lastVisibleItem = virtualizer.items[virtualizer.items.length - 1];
|
||||
const itemsRemaining = total - lastVisibleItem.index;
|
||||
// Compare against loaded items length, not total
|
||||
const itemsRemaining = items.length - lastVisibleItem.index;
|
||||
|
||||
if (itemsRemaining <= 5) {
|
||||
onNearBottom(lastVisibleItem.index);
|
||||
|
||||
Reference in New Issue
Block a user