Pagination 分页

/paj-ih-NAY-shun/ · noun · 导航类模式 · #050

给长列表设下带编号的站点,「上一页」「下一页」守在两端。用户放弃无限滚动,换来一份位置感。

Pagination(分页) UI 模式示例:CatchUI 图鉴标本

别名:页码、翻页。

你可能会这样叫它

  • “底部的页码”
  • “上一页 / 下一页按钮”
  • “1 2 3 页码按钮”
  • “翻页按钮”
  • “列表底部的页码导航”

……它的名字是 分页(Pagination)。

代码里叫什么

iOS / Android / Flutter 没有页码分页组件,手机列表通常滚动到底自动加载更多
Web (HTML / ARIA)<nav aria-label="Pagination"> <a href="?page=2"> aria-current="page"

复制给 AI 编程工具

在列表下方加分页:上一页、下一页链接加页码;显示第一页、最后一页和当前页附近的页码,其余折叠成“…”。当前页高亮并标 aria-current="page",第 1 页时禁用“上一页”,最后一页时禁用“下一页”;每个页码都是真实链接(?page=N),放在 <nav aria-label="Pagination"> 里,方便收藏和被搜索引擎抓取。

用 AI 写界面时该怎么说:UI 用词指南(英文)→

相关模式

传一张截图,抓住这个模式 →

学会从视觉线索认出 UI 模式(英文)