下拉加载刷新

news/2024/11/8 20:39:10/

注意传参没有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' }}><PictureclassName="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>

http://www.ppmy.cn/news/484323.html

相关文章

electron 连接打印机打印pdf文件

electron 打印内容 区分系统 类似unix系统的使用 npm包&#xff1a;unix-printwindow系统使用&#xff1a; pdf-to-printer 运行线程 视图线程 函数参数 两个包都提供了print函数来打印文件&#xff0c;配置基本一致&#xff0c;只是参数形式有所不同&#xff0c;pdf-to-pr…

保证水库大坝安全需要做好哪方面的监测

水库安全监测是保证水库大坝安全的重要手段是确保水库大坝安全运行的基础也是做好水库安全管理的重要技术保障。根据《水库大坝安全管理条例》《水库大坝安全监测技术规范》等有关规定&#xff0c;对坝体变形、渗透、应力应变等进行监测&#xff0c;以掌握坝体、坝基和库岸的运…

三网话费充值优惠接口API分享

话费充值接口文档 接口版本&#xff1a;1.0 ―、引言 文档概述 本文档提供话费充值接口规范说明&#xff0c;提供一整套的完整的接入示例(http 接口)供商户参 考&#xff0c;可以帮助商户开发人员快速完成接口开发与联调&#xff0c;实现与话费充值系统的交易互联。 公司官网…

【Flutter——复选框实例代码超详细讲解!】

Flutter——复选框实例代码超详细讲解&#xff01; 文章目录 Flutter——复选框实例代码超详细讲解&#xff01;代码实现效果代码实例代码结构总结 代码实现效果 代码实例 import package:flutter/material.dart; // 导入 Flutter 的核心库void main() {runApp(const MyApp())…

.Net6 WebAPI 手动开启gRPC服务

文章目录 .Net6 WebAPI 手动开启gRPC服务引用包开启服务配置gRPC通道完整代码 总结新建一个Service.cs类&#xff0c;继承自生成的类后&#xff0c;重写处理方法&#xff08;如果没有生成就先编译一下工程文件&#xff09;必须重写proto中定义的所有方法 .Net6 WebAPI 手动开启…

Linux基础服务1——Openssh

文章目录 一、基本简介二、登录示例2.1 当前用户登录2.2 指定用户登录 三、ssh主机密钥四、ssh免密登录五、服务端配置文件5.1 连接端口号5.2 限制只能使用普通用户登录5.3 密钥登录 六、SSH安全注意事项 一、基本简介 常见远程登录工具&#xff1a; telnet&#xff0c;认证明文…

汇川MD500主控板资料

原理图PCB图BOM 欢迎大家一起学习 链接&#xff1a;https://pan.baidu.com/s/1jSUonZusru8LUz10O0QEdQ?pwdgeid 提取码&#xff1a;geid

如何查看自己的分区是固态还是机械

第一步 点击管理 第二步 点击磁盘管理 第三步 查看自己之前的分区 ps:因为一般系统是装在固态的&#xff0c;所以和系统一起的就是装在固态里&#xff0c;其余的就是装在机械盘里了。&#xff08;有其他情况除外&#xff09;