用途:分页将大型内容集合拆分为可管理的块或页面,让用户浏览数据集、搜索结果或商品列表时不会一次面对过多信息。适合内容列表需要浏览、通过加载较小片段提升页面性能、大数据集需要更清晰导航、以及多页教程或文章等顺序内容需要导航的场景。
主要能力:提供结构化的渐进式加载,改善用户体验与性能。实现前应先确认该模式与问题及约束匹配,从 references/pattern.md 的解剖与示例出发,选择最小可行变体,先应用无障碍、性能与交互护栏,再做视觉打磨,并按测试指引验证键盘、屏幕阅读器、响应式与失败场景。
无障碍要求:容器使用 role="navigation" 并配适当的 aria-label(如 "Pagination Navigation");每个分页项包含指示对应页码的 aria-label;用 aria-current="page" 标识当前页。键盘交互:Tab 在分页控件与页码按钮间导航。
性能目标:点击后页面切换启动 < 100ms,内容加载开始 < 200ms,完整渲染理想 < 1000ms、可接受 < 2000ms,过渡动画 200-300ms;预取相邻页面,最近浏览页面缓存 5 分钟,每页数据请求 < 50KB。
常见错误:不显示总页数(应显示 "Page 3 of 12" 或 "Showing 21-30 of 120 items");缺少当前页高亮(用对比色、边框或尺寸区分);点击目标过小(触控目标至少 44x44px 并留足间距)。
限制与替代:当所有内容更适合单页、无限滚动或 "Load More" 更合适、或用户需要跨页连续比较项目时,应避免使用分页。分页与无限滚动的选择取决于内容性质、用户行为和界面目标。相关模式包括无限滚动与 Load More。完整实现细节、示例与测试说明见 references/pattern.md,模式页面为 https://uxpatterns.dev/patterns/navigation/pagination。