分页
Pagination
别名:分页器翻页页码上一页下一页页码条pager
这是什么
用带页码的控件把长结果集切分为离散页面：用户显式点击页码或上一页 / 下一页 按钮取回对应片段，当前位置永远可知、可分享、可回退。与无限滚动的"失控 漂移"相对，它是数据浏览中最可控的方式，也是搜索结果与后台表格的默认选择。
交互实验室
试一试，再决定怎么用切换页码与前后页，观察首尾边界。
正在加载实验室…
使用时关注什么
- 01第一页不能继续向前，最后一页不能继续向后。
- 02页码变化时同时更新内容，不只改变按钮颜色。
✓ 适用场景
- 结果集有序、用户需要定位与回溯
- 需要可分享的页码 URL（搜索、后台表格）
- 需要跳到末页或精确页码
✕ 不适用场景
- 休闲浏览的无限信息流
- 结果集很小，一页即可容纳
- 内容无法均匀切分且顺序常变
常见形式
页码型
Numbered
完整页码 + 省略号，可控性最强
简洁型
Simple
仅上一页 / 下一页与计数
跳页型
Jump
页码 + 输入跳转，适合超大结果集
实现要点
flexgapmin-widtharia-disabled页码窗口算法：始终显示首末页与当前页 ± 1，中间折叠为省略号。当前页用 aria-current="page" 与强调色块标识；首末页时禁用上一页 / 下一页 （disabled + aria-disabled）。URL 同步用查询参数 ?page=n，保证可分享可回退。
平台 API
<nav aria-label="Pagination">role="navigation"横向对比
查看完整对比 →相关概念
用"滚动到底自动追加下一页"取代传统分页：用户持续下滑，新内容不断出现， 底部以加载指示或哨兵元素衔接。它解决的是浏览节奏被打断的问题—— 用户不必寻找"下一页"按钮，注意力始终停留在内容流上，长列表被拆成一次次无感的追加。
交互模式替代方案在列表顶部按住并向下拖动，出现随拖动距离变化的加载指示，超过阈值后松手即重新拉取最新数据。 它解决的是"内容可能已经过期"的问题——用户主动、可预期地请求更新， 而不是被动等待自动轮询，刷新的时机和结果都由自己掌控。
交互模式替代方案用行与列精确对齐数据的二维表格：一行一条记录、一列一个字段，适合逐列比较、排序与大容量数据浏览。 行可悬停高亮、点击选中，列头通常带排序控制。
组件相似概念用一排可切换的标签把同一区域的内容分成互斥视图：标签头常驻可点击，仅当前 标签对应的面板可见，其余隐藏。适合把高度相关的几类内容压缩在同一区域内 就地切换，避免整页跳转。键盘上用左右方向键在标签间移动，是可访问性的经典范例。
组件相似概念用即时过滤把大列表缩到与当前输入相关的一小部分：用户在搜索框敲字，列表随之实时收窄， 并显示命中数量与空结果提示。它把"查找"变成"修剪"，不用提交、不用等跳转，反馈就在眼前。
交互模式搭配使用