Load more data while reach bottom of the page
Basic usage
Add v-infinite-scroll to the list to automatically execute loading method when scrolling to the bottom.
export function InfiniteScrollBasic() { const [count, setCount] = useState(0); const listRef = useRef<HTMLUListElement>(null); useInfiniteScroll(listRef, { onLoad: () => setCount((value) => value + 2), }); return ( <ul ref={listRef} className="infinite-list" style={listStyle}> {Array.from({ length: count }, (_, index) => ( <li key={index + 1} className="infinite-list-item" style={itemStyle}> {index + 1} </li> ))} </ul> );}
Disable Loading
export function InfiniteScrollDisableLoading() { const [count, setCount] = useState(10); const [loading, setLoading] = useState(false); const noMore = count >= 20; const disabled = loading || noMore; const listRef = useRef<HTMLUListElement>(null); useInfiniteScroll(listRef, { disabled, onLoad: () => { setLoading(true); window.setTimeout(() => { setCount((value) => value + 2); setLoading(false); }, 2000); }, }); return ( <div className="infinite-list-wrapper" style={wrapperStyle}> <ul ref={listRef} className="list" style={plainListStyle}> {Array.from({ length: count }, (_, index) => ( <li key={index + 1} className="list-item" style={index > 0 ? { ...dangerItemStyle, marginTop: 10 } : dangerItemStyle} > {index + 1} </li> ))} </ul> {loading && <p>Loading...</p>} {noMore && <p>No more</p>} </div> );}
Directives
| Name | Description | Type | Default |
|---|
| v-infinite-scroll | Load more data while reach bottom of the page | Function | — |
| infinite-scroll-disabled | is disabled | boolean | false |
| infinite-scroll-delay | throttle delay (ms) | number | 200 |
| infinite-scroll-distance | trigger distance (px) | number | 0 |
| infinite-scroll-immediate | Whether to execute the loading method immediately, in case the content cannot be filled up in the initial state. | boolean | true |
