注意传参没有pageNo的话,就不能实现下拉刷新,因为不知道当前要加载哪页的内容
const [list, setList] = useState<IgetListUserResponce['data']>();
const [showLoading, setShowLoading] = useState(false);
const memoState = useMemo<{
pageNo: number;
total: number;
cacheList: ModelList[];
}>(() => {
return {
pageNo: 1,
total: 0,
cacheList: []
}
}, []);
const fetchList = useCallback(
debounce(async (nextPage = false) => {
// 没有更多数据了
if (nextPage && memoState.cacheList.length >= memoState.total) {
return;
}
setShowLoading(true);
try {
const newPageNo = memoState.pageNo + 1;
const res = await getListUser({
lotteryId: Number(getQueryParam('detailId')) || Number(getQueryParam('wyswyg')),
pageNo: nextPage ? newPageNo : 1,
pageSize: 20,
mockFile: 'getListUser'
})
setShowLoading(false);
if (!res?.data) {
return;
}
// !nextPage && setShowList(true);
memoState.pageNo = res.data.joinedUsers.pageNo;
memoState.total = res.data.joinedUsers.totalCount;
memoState.cacheList = res.data.joinedUsers.pageNo === 1 ? res.data.joinedUsers.modelList : [...memoState.cacheList, ...res.data.joinedUsers.modelList];
setList({
...res.data,
joinedUsers: {
...res.data.joinedUsers,
modelList: [...memoState.cacheList]
}
})
} catch (e) {
setShowLoading(false);
console.error(e);
}
}, 10), [list]);
const loadNextPage = useCallback(() => {
fetchList(true);
},[showLoading, fetchList])
<ParticipantList data={list} teamStatus={dealStatus} close={setShowList} loadNextPage={loadNextPage} />}
<Loading visible={showLoading} />
//ParticipantList/index.tsx
<div className="participant-list-others">
<ul>
{modelList.map((item, index) => {
return (
<li className="participant-list-others-item">
<View onAppear={index === modelList?.length-1 ? loadNextPage : undefined} style={{ flexDirection: 'row' }}>
<Picture
className="participant-list-others-item-avatar"
source={{ uri: item.userAvatar || 'https://lzd-img-global.slatic.net/g/tps/imgextra/i4/O1CN01fZmbF91bKlwJdOvDb_!!6000000003447-0-tps-400-400.jpg' }}
style={{
width: '62rpx',
height: '62rpx',
}}
/>
<div className="participant-list-others-item-right">
<div className="participant-list-others-item-right-name">{item.userNick}</div>
<div className="participant-list-others-item-right-time">{i18n.partJoinShow.replace(/<!joinTimeDisplay>/g, item.joinTimeDisplay)}</div>
</div>
</View>
</li>
)
})}
</ul>
</div>