界面图鉴

分页Pagination

你可能会问

分页到底是什么？内容太多的时候怎么分着看？

简单来说

把一长串内容切成一页一页，底部给页码和前后翻页。

01 · 拆开看看

这一块由什么组成

它把一长串内容切成一页一页，底部给你页码和前后翻页。它和无限滚动，是同一个问题的两种答案。组成：

页码Pages
可以直接跳转的数字。
当前页Current
高亮的那个数字，标记你在第几页。
前后翻页Prev / Next
上一页、下一页的箭头，第一页时上一页要禁用。
省略号Ellipsis
页数太多时折叠中段。

02 · 常见变体

同一个零件，几种摆法

页码型

数字加省略号，可以跳页。

前后型

加载更多

一个按钮往下续，手机友好。

03 · 火眼金睛

这个文档站里，哪一块是分页？

四个都在帮你找路，分工完全不同。

123

点一块试试，看看它叫什么

04 · 用与不用

什么时候该上它

适合

要定位回访：搜索结果、订单、表格
数据量大且用户要跳页
需要知道总量的场景

先别用

杀时间的信息流——无限滚动更顺
内容一页放得下——别分
手机长列表——「加载更多」更稳

05 · 想一想

一道题，检查眼力

信息流（动态、瀑布流图片）适合分页还是无限滚动？

A无限滚动——「逛」的场景不需要位置感B分页——什么内容都应该分页C一次全部加载完

06 · 说给 AI 听

让 AI 改它时，这样说

每页几条、总量从哪来说清楚——分页组件本身 AI 很熟。

文章列表分页，每页 12 条，底部页码

页数多时中间折叠成省略号

手机上分页换成「加载更多」按钮

当前页高亮，第一页时禁用上一页

老师提醒

最容易踩的坑

分页的位置能被收藏和转发，无限滚动不能。选之前先想：用户需要「回到刚才那里」吗？

这一块由什么组成

页码Pages

当前页Current