Pagination
分页
WebDesktop上手难度: 容易
把长长的列表切成几页，底部放一排页码让你跳到其中一页。
Live Demo
真的可以点正在看第 3 页的结果
共 48 页 · 每页 20 条
你刚才看到的这个：搜索结果底部那排「‹ 1 2 3 … 48 ›」，淘宝商品列表底部的页码条，都是 Pagination。
它到底是什么
Pagination 的核心价值是「可定位」：用户能记住「第 3 页有东西」，也能直接跳回去。对内容型、翻页型数据（文章列表、搜索结果）它仍然是最稳的方案。
分页器翻页页码pagerpaging
Anatomy · 它由什么组成
Prev / Next上下页按钮
首尾页时置灰禁用
Page Numbers页码
当前页高亮，两侧加省略号
Current当前页
加粗或换色
Total Info总数信息
「共 1,240 条」
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 内容有明确顺序且用户会想回看 | 用 |
| 总数有限、可以一次给出总数 | 用 |
| URL 需要能定位到具体一页（SEO / 分享） | 用 |
| 无限下滑的社交信息流 | 不用 |
| 数据量巨大且用户不需要跳页 | 不用 |
在手机上，每页 10 条 + 一排页码的操作成本很高，用户会不知道自己在第几页。
当用户的目标是「一直往下刷」而不是「找到第 48 页」，分页就是阻碍。
Similar Patterns
别搞混一句话区分：把长长的列表切成几页，底部放一排页码让你跳到其中一页。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
在列表底部加 Pagination，显示上一页/下一页和页码，当前页高亮，两侧溢出时用省略号。
不要只对 AI 说
Bad → Better不要这样对 AI 说
加个翻页的东西。
改成这样说
列表底部加 Pagination：‹ 1 2 3 … 48 ›，当前页高亮，首尾页禁用，手机上只留上一页/下一页，页码同步到 URL。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。