分页加载的核心是按需获取、动态追加，需维护page、hasMore、loading状态，通过滚动监听触发fetch请求并拼接数据，注意防重复、防错乱、状态同步。
分页加载的核心是“按需获取、动态追加”，不是一次性拉完再切片，而是每次请求一页数据，成功后拼接到已有列表中。关键在于维护好页码状态、避免重复请求、处理加载中与失败状态。
1. 基础分页参数与状态管理
前端需要主动跟踪当前页码、是否还有下一页、是否正在加载等状态，不能依赖后端返回的 total（除非必须做页码导航）：
- page：当前请求的页码，从 1 开始（或 0，需与接口约定一致）
- pageSize：每页条数，通常固定（如 10 或 20）
- dataList：已加载的数据数组，用于后续拼接
-
hasMore：布尔值，标识是否还有更多数据（后端应返回
has_more: true或next_page: 2等） - loading：防止用户快速滚动多次触发请求
2. 异步请求 + 数据拼接（推荐 fetch + async/await）
以滚动到底部自动加载为例，每次请求成功后将新数据 push 或 concat 到原数组：
let dataList = []; let page = 1; const pageSize = 10; let hasMore = true; let loading = false;async function loadMore() { if (loading || !hasMore) return;
loading = true; try { const res = await fetch(
/api/list?page=${page}&size=${pageSize}); const { data, has_more } = await res.json();// 拼接数据：直接 push 或用 concat 生成新数组（推荐后者，便于 React/Vue 响应式更新） dataList = dataList.concat(data); hasMore = has_more; page++;} catch (err) { console.error("加载失败", err); } finally { loading = false; } }
3. 滚动监听触发加载（防抖 + 判定底部）
监听容器滚动，当距离底部一定距离（如 100px）且未加载中时触发：
function onScroll() { const container = document.getElementById('list-container'); const { scrollTop, scrollHeight, clientHeight } = container; if (scrollHeight - scrollTop - clientHeight <= 100) { loadMore(); } }// 添加节流（简单实现） let throttleTimer; container.addEventListener('scroll', () => { if (throttleTimer) return
; throttleTimer = setTimeout(() => { onScroll(); throttleTimer = null; }, 150); });
4. 注意事项与常见坑
;
throttleTimer = setTimeout(() => {
onScroll();
throttleTimer = null;
}, 150);
});- 不要用 offset + limit 做前端分页：后端必须按 page/size 分页，否则数据错乱（尤其有插入/删除时）
-
避免重复请求：loading 状态必须严格控制，fetch 中间取消可用
AbortController（进阶） - 空数据或失败时不重置 page：只停在当前页，用户可手动重试，而不是回到第 1 页
-
后端应返回明确的分页信号：如
has_more: true、total: 123或next_cursor: "abc123"，比单纯靠 length 判断更可靠 - 首次加载建议显式调用一次：不要等滚动才触发，提升首屏体验
不复杂但容易忽略的是状态同步——dataList 更新后，视图必须响应；hasMore 变为 false 后要停止监听或禁用加载提示。只要把页码、数据、开关三者串起来，分页加载就稳了。
