分页Pagination

你可能会说

内容太多一页放不下，底下加上 1、2、3 翻页。

分页是把大量结果分成多个可定位页面浏览的导航组件订单列表可每页显示 20 条并让用户跳到第 5 页。应显示当前页和总量并同步到网址；连续浏览的信息流可考虑加载更多。
‹ … 10 ›

什么时候用

  • 长表格 / 订单列表，一页一页翻着看
    #1024已支付
    #1025待发货
    ‹123…9›
  • 搜索结果成百上千条，按页消化
    找到 2,431 条结果
    ‹123…122›
  • 需要记住位置，下次还能翻回来
    ‹456…20›
    看到第 5 页，下次接着翻
  • 数据量大，按页加载减轻前后端压力
    每页 20 条
    ‹12›

什么时候不用

  • 内容只有一页：无需显示分页控件
    ‹1›
  • 信息流需要连续浏览：可使用无限加载或“加载更多”
    ‹123›
    连续浏览的信息流，被翻页操作反复打断
  • 几百页页码全部铺开不加省略号
    ‹123456789›
  • 只是在同页切换几个分类：使用 标签页 Tabs
    全部待付款已完成
    这是分类切换，用标签页
组成结构 · Anatomy
‹ 1 2 … 10 ›
‹ › 前后翻页，翻到顶会置灰
当前页高亮，点击直达对应页
页数太多时折叠中间的页码
常见变体 · Variants
基础分页Basic
‹123…10›
页数多、需要直接跳到某一页
简洁分页Simple
‹3 / 12›
空间有限且只需前后翻页时
迷你分页Mini
‹123›
弹窗、小卡片里地方很小的分页
典型使用场景
订单列表翻页
全部订单
#20260718无线降噪耳机已完成¥899
#20260717机械键盘 87 键配送中¥329
共 128 条
‹123…13›
搜索结果浏览
找到约 2,431 条结果（0.32 秒）
2026 年最值得买的十款无线耳机
降噪耳机怎么选？看懂这三个参数
‹123…122›
数据表格按页加载
成员角色状态
林小狐管理员在线
陈一编辑离线
每页 20 条 · 共 342 条
‹123…18›
博客文章列表
山系生活：周末徒步装备清单
阅读 3.2k · 3 天前
我的极简工作台搭建记录
阅读 1.8k · 上周
‹123›