分页几乎每个列表都要用,但做法和坑不少。Claude Code能帮你实现前后端分页、游标分页、无限滚动,下面就分享Claude Code怎么实现分页的详细方法。
常见的分页方式
| 方式 | 适合 |
|---|---|
| 页码分页 | 传统列表,可跳页 |
| 游标分页 | 大数据 / 实时流 |
| 无限滚动 | 移动端 / 信息流 |
用法一:后端分页查询
「为这个列表接口实现分页,返回数据和总数,支持页码和每页条数。」
用法二:前端分页组件
「做一个分页组件,显示页码、上一页/下一页,可跳转。」
用法三:游标分页
「这个表数据量很大,用游标(cursor)分页替代 offset,提升性能。」
大数据量用 offset 翻到后面会很慢,游标分页更优。
用法四:无限滚动
「实现下拉加载更多的无限滚动列表,处理加载中和到底状态。」
用法五:处理边界
「处理空数据、最后一页、并发加载等边界情况。」
分页实践建议
- 大数据用游标:避免深翻页性能问题。
- 返回总数:页码分页需要总数算总页。
- 处理边界:空、末页、重复加载。
- 前后端对齐:参数和返回结构约定一致。
- 加载反馈:加载中、出错、到底都要提示。
小结
把分页实现交给 Claude Code,页码、游标、无限滚动都能搞定。大数据用游标、返回总数、处理边界,列表分页又快又稳。
