当前位置: 首页 > news >正文

react+ts 移动端页面分页,触底加载下一页

react ts 移动端页面分页,触底加载下一页

index.tsx

import React, { useState, useEffect } from 'react';
import { useSelector, useDispatch, useLocation } from "dva";
import styles from './index.less';const List = () => {const location = useLocation();// 解析查询参数(需手动处理)const searchParams = new URLSearchParams(location.search);const dispatch = useDispatch();const [loading, setLoading] = useState(false); // 加载状态const [finished, setFinished] = useState(false); // 是否加载完成const [page, setPage] = useState(1); // 当前页码const [pageSize, setPageSize] = useState(10); // 每页显示条数const [data, setData] = useState([]); // 当前显示的所有数据const [screenHeight, setScreenHeight] = useState(window.innerHeight); // 当前屏幕高度// 获取屏幕高度并监听窗口大小变化useEffect(() => {const handleResize = () => {setScreenHeight(window.innerHeight);};window.addEventListener("resize", handleResize);return () => window.removeEventListener("resize", handleResize);}, []);// 请求接口数据const getList = async (page) => {if (loading || finished) return;setLoading(true);try {dispatch({type: "",payload: {url:`你的接口`,type: "POST",body: {page: page,rows: pageSize},header: { "你的请求头参数" },},callback: res => {if (res.result === "1" && res.rows.length > 0) {setData((prevData) => [...prevData, ...res.rows]); // 追加新数据if (res.rows.length < pageSize) {setFinished(true); // 如果返回数据不足一页,说明没有更多数据}} else {setFinished(true); // 接口无数据时停止加载}},});} catch (error) {console.error("数据加载失败:", error);} finally {setLoading(false);}};// 初始化加载第一页数据useEffect(() => {getList(1);}, []);// 监听滚动事件useEffect(() => {const container = document.querySelector(`.${styles.cardListContainer}`);if (!container) return;const handleScroll = () => {const { scrollTop, clientHeight, scrollHeight } = container;if (scrollTop + clientHeight >= scrollHeight - 10 && !loading && !finished) {setPage((prevPage) => prevPage + 1); // 触底时分页加 1}};container.addEventListener("scroll", handleScroll);return () => container.removeEventListener("scroll", handleScroll);}, [page, loading, finished]);// 当分页变化时加载数据useEffect(() => {if (page > 1) {getList(page); // 加载对应页的数据}}, [page]);return (<divclassName={styles.cardListContainer}style={{ height: screenHeight, overflowY: "auto" }} // 动态设置高度>{/* 卡片列表 */}{data.map((item) => (<div key={item.id} className={styles.card}><div className={styles.cardContent}><div><span className={styles.phone}>{item.phone}</span></div><div><span className={styles.remark}>   {item.remark || "无备注"}</span></div></div></div>))}{/* 加载提示 */}{loading && <div className={styles.loading}>加载中...</div>}{/* 已加载全部数据提示 */}{finished && <div className={styles.finished}>已显示全部数据</div>}</div>);
};export default List;

index.less

/* 卡片列表容器 */
.cardListContainer {width: 100%;margin: 0 auto;padding: 0.2rem;overflow-y: auto;/* 支持内部滚动 */background: #FFF;padding-top: 0.85rem; // 留出一部分距离给导航栏
}/* WebKit 内核浏览器补充 */
.cardListContainer::-webkit-scrollbar {display: none;
}/* 卡片样式 */
.card {width: 100%;padding: 0.2rem;margin-bottom: 0.12rem;display: flex;flex-direction: column;border-radius: 0.06rem;background: rgba(0, 0, 0, 0.03);
}.cardContent {display: flex;justify-content: space-between;align-items: center;div {display: inline-grid;}.phone {color: #101010;font-size: 0.15rem;font-style: normal;font-weight: 300;line-height: 0.24rem;}.remark {color: rgba(29, 29, 30, 0.70);font-size: 0.12rem;font-style: normal;font-weight: 300;line-height: 0.18rem;}
}/* 加载提示 */
.loading {text-align: center;font-size: 0.12rem;color: rgba(29, 29, 30, 0.20);padding: 0.1rem;
}/* 已加载全部数据提示 */
.finished {text-align: center;font-size: 0.12rem;color: rgba(29, 29, 30, 0.20);padding: 0.1rem;
}
http://www.lryc.cn/news/583053.html

相关文章:

  • 板凳-------Mysql cookbook学习 (十一--------6)
  • 安卓设备信息查看器 - 源码编译
  • Android-重学kotlin(协程源码第二阶段)新学习总结
  • 中望CAD2026亮点速递(5):【相似查找】高效自动化识别定位
  • uniapp AndroidiOS 定位权限检查
  • Android ViewModel机制与底层原理详解
  • upload-labs靶场通关详解:第19关 条件竞争(二)
  • 池化思想-Mysql异步连接池
  • 5.注册中心横向对比:Nacos vs Eureka vs Consul —— 深度解析与科学选型指南
  • Web 前端框架选型:React、Vue 和 Angular 的对比与实践
  • 华为静态路由配置
  • 小米路由器3C刷OpenWrt,更换系统/变砖恢复 指南
  • 语音识别核心模型的数学原理和公式
  • 从互联网电脑迁移Dify到内网部署Dify方法记录
  • 【编程史】IDE 是谁发明的?从 punch cards 到 VS Code
  • 计算机网络实验——访问H3C网络设备
  • Java项目集成Log4j2全攻略
  • Using Spring for Apache Pulsar:Publishing and Consuming Partitioned Topics
  • 飞算 JavaAI 智能编程助手 - 重塑编程新模态
  • bash 判断 /opt/wslibs-cuda11.8 是否为软连接, 如果是,获取连接目的目录并自动创建
  • (C++)任务管理系统(正式版)(迭代器)(list列表基础教程)(STL基础知识)
  • `fatal: bad config value for ‘color.ui‘`错误解决方案
  • ali linux 安装libreoffice
  • Markdown入门
  • 类和对象拓展——日期类
  • Django核心知识点详解:JSON、AJAX、Cookie、Session与用户认证
  • npu-smi info 华为昇腾NPU 状态监控工具解读
  • 类与对象【下篇】-- 关于类的其它语法
  • 树莓派vsftpd文件传输服务器的配置方法
  • 【02】MFC入门到精通——MFC 手动添加创建新的对话框模板