官网:antdMobile官网
用户想看到新的数据时,可以上滑页面自动加载数据。
当 hasMore 属性为 true 时,用户页面滚动到底部 threshold (默认为 250px)时无限滚动组件会调用定义的 loadMore 函数。
// 解决useState 异步 接口多调一次的问题
const listRef = useRef(ensureList)
listRef.current = list
const getList = async ({
no }) => {
try {
const res: any = await getProductList({
page: no,
pageSize: 10,
name: searchName,
});
if (res.code === 200) {
const append = res.data || [];
if (append.length > 0) {
setList((val) => [...val, ...append]);
setPage(no);
//listRef解决异步问题
const totalLength = listRef.current.length;
setHasMore(totalLength < res.total);
return;
}
setHasMore(false);
}
setHasMore(false);
} catch {
setHasMore(false);
}
};
const changeTab = async (key: string) => {
setList([]);
setPage(0);
setHasMore(true);
};
const searchProductList = (value: string) => {
setList([]);
setPage(0);
setHasMore(true);
};
const handleLoadMore = async () => {
await getList({
no: page + 1 });
};
<div>
{
/* 列表 */}
<ProductList list={
list}></ProductList>
<InfiniteScroll loadMore={
handleLoadMore} hasMore={
hasMore} threshold={
0}></InfiniteScroll>
</div>