下拉加载刷新

注意传参没有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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值