ThinkPHP怎么实现前端分页加载_ThinkPHP无限滚动技巧【技巧】

• 直接在 AJAX 请求里调 index.html 路由？结果拿到的是整个页面 HTML，解析成本高、容易出错。
• 想复用 paginate() 的分页逻辑？可以，但必须手动提取数据、跳过视图渲染。
• 关键点：用 $query->paginate(['type' => 'bootstrap', 'var_page' => 'page']) 只控制了参数命名，输出格式仍需额外处理。

后端要提供标准的分页 API 接口

新建一个控制器方法（比如 api/list），不调用 fetch() 渲染视图，直接返回 JSON：

public function list(){    $page = input('get.page/d', 1);    $limit = input('get.limit/d', 10);    $data = Db::name('article')        ->order('id desc')        ->page($page, $limit)        ->select();    $total = Db::name('article')->count();    return json([        'code' => 0,        'data' => $data,        'meta' => [            'current_page' => $page,            'last_page'    => ceil($total / $limit),            'per_page'     => $limit,            'total'        => $total        ]    ]);}

• 别用 paginate() 返回对象再转 JSON——它内部会自动计算总条数并附加分页属性，但字段名和结构不统一（比如 render 是 HTML 字符串），在 API 场景下会偷偷注入视图依赖。
• 显式用 page($page, $limit) + count() 更可控，字段清晰，没有额外开销。
• 务必校验 $page 和 $limit，防止 SQL 注入或内存爆掉（比如传 limit=999999 这种极端情况）。

前端滚动监听 + 防抖 + 加载状态管理

后端只是数据源，前端才是滚动加载的关键执行者。常见的翻车点：快速滚动触发多次请求、已经到底部了还在重复加载、没有判断是否还有下一页。

• 推荐用 IntersectionObserver 替代 scroll 事件监听，性能更好，兼容性也够（IE 不支持，但 ThinkPHP 项目通常不用保 IE）。
• 加一个 loading 标志位，请求中禁止再次触发：比如 if (loading || page >= last_page) return;。
• 不要用 window.innerHeight + window.scrollY >= document.body.offsetHeight——误差大，用目标占位元素更稳定。
• 示例关键逻辑：axios.get('/api/list', { params: { page: nextPage++, limit: 10 } })，成功后追加到列表 DOM 并更新 last_page。

最容易被忽略的一点：服务端分页键是否稳定。如果列表按 create_time 排序，而新数据实时插入，滚动加载时可能出现重复或跳过——这不是 ThinkPHP 的问题，而是业务排序字段本身不具备唯一性和稳定性。这时候需要改用 id < 上次最后一条的 id 的游标分页，ThinkPHP 后端要配合做 WHERE 条件改写，而不是依赖 page/offset 参数。