分页加载的核心是按需获取、动态追加，需维护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;
<p>async function loadMore() {
if (loading || !hasMore) return;</p><p>loading = true;
try {
const res = await fetch(<code>/api/list?page=${page}&size=${pageSize}</code>);
const { data, has_more } = await res.json();</p><pre class="brush:php;toolbar:false;">// 拼接数据：直接 push 或用 concat 生成新数组（推荐后者，便于 React/Vue 响应式更新）
dataList = dataList.concat(data);
hasMore = has_more;
page++;} catch (err) { console.error("加载失败", err); } finally { loading = false; } }
3. 滚动监听触发加载（防抖 + 判定底部）
监听容器滚动，当距离底部一定距离（如 100px）且未加载中时触发：
立即学习“Java免费学习笔记（深入）”；
function onScroll() {
const container = document.getElementById('list-container');
const { scrollTop, scrollHeight, clientHeight } = container;
if (scrollHeight - scrollTop - clientHeight <= 100) {
loadMore();
}
}
<p>// 添加节流（简单实现）
let throttleTimer;
container.addEventListener('scroll', () => {
if (throttleTimer) return;
throttleTimer = setTimeout(() => {
onScroll();
throttleTimer = null;
}, 150);
});4. 注意事项与常见坑
- 不要用 offset + limit 做前端分页：后端必须按 page/size 分页，否则数据错乱（尤其有插入/删除时）
-
避免重复请求：loading 状态必须严格控制，fetch 中间取消可用
AbortController（进阶） - 空数据或失败时不重置 page：只停在当前页，用户可手动重试，而不是回到第 1 页
-
后端应返回明确的分页信号：如
has_more: true、total: 123或next_cursor: "abc123"，比单纯靠 length 判断更可靠 - 首次加载建议显式调用一次：不要等滚动才触发，提升首屏体验
不复杂但容易忽略的是状态同步——dataList 更新后，视图必须响应；hasMore 变为 false 后要停止监听或禁用加载提示。只要把页码、数据、开关三者串起来，分页加载就稳了。
