需求背景:做一个分页的无限滚动,第一次用这个ui库,也算是吃了点苦头,好记性不如烂笔头记录一下~
框架使用:react + hooks;
注意点::
- 如果带有搜索功能尽量不使用useeffct的副作用,官网有带搜索的示例。
- loadMore函数返回必须为一个promise,否则会引起无限加载的问题。
- 当加载的页面高度没有撑起loadMore所需的高度时,loadMore函数会自动执行,需对hasmore做业务判断。 源码是拿 父高度 >= el.top - threshold进行判断执行;
代码部分:
js部分
。
// 接口
const getAuditList = async (params: Param) => {
setParams(params);
try {
const res = await api.getApplyAuditList(params);
if (res && res.list) {
res.list.length > 0 && res.list.forEach((item: any) => {
setBusinessList((val: any) => [...val, ...res.list]);
setHasMore(res.list && res.list.length > 0);
return;
}
setHasMore(false);
}
catch {
setHasMore(false);
}
};
// 搜索框
const onKeywordChange = async (customerName: string) => {
setBusinessList([]);
setHasMore(false);
await getAuditList({
...params,
customerName,
page: 1,
});
};
//无限滚动
const loadMore = async () => {
await getAuditList({
...params,
page: params.page + 1,
});
};
html部分
。
<div className="business-list">
// list部分根据实际业务
<BusinessCard list={businessList} />
<InfiniteScroll loadMore={loadMore} hasMore={hasMore} threshold={100} />
</div>