适用：搜索结果页、列表页等，有信息查找诉求的场景。

不适用：无明确查找目的的信息浏览场景，比如淘宝促销页。

通用原则

• 翻页器默认定位在第一页

• 当页面数很多的时候，需要提供快速跳转页面的功能

• 单页展示的内容数最好不低于 10 个

类型

类型	何时使用
常规	数据量大，用户需要灵活查找内容的时候
迷你	数据量小，用户仅有翻页功能的时候

常规

• 拥有最完整的功能，按需使用「统计、快速跳转、单页展示数设定」

• 当页面数 <= 10 的时候，页码完整展示，无需隐藏中间页码

• 当页面数 >= 10 的时候，默认展示前 5 页及最后 1 页，中间页码「···」省略

迷你

• 拥有最基本的页数统计和翻页功能

• 视觉轻量，占位少

• 可根据实际需要，显示「统计」

构成

1. 上下翻页+页码

   1. 点击上下翻页跳转到临近页面

   2. 当无页面时，上下翻页不可用

   3. 当页面数 <= 10 的时候，直接铺开，无需省略

   4. 当页面数 > 10 的时候

      1. 默认展示前 5 页及最后 1 页

      2. 切换到中间页码的时候，展示第 1 页、最后 1 页，及当前页的前后 2 页

2. 单页展示数设置（可选）

3. 快速跳转（可选）

   1. 默认填充的页码为当前页的下一页

   2. 用户可随意输入想要跳转的页码，当输入值超过最大页数时，自动纠正为最大页码

4. 总信息数（可选）

   1. 准确展示结果总数

行为

切换页

• 点击页码，刷新列表进入指定页

• 点击上一页/下一页逐页切换

  • 当无上一页/下一页的时候，「上/下一页」不可用

跳转页

• 激活快速跳转时，默认为当前页的下一页，enter 或输入框失焦后直接跳转

• 亦可输入具体页码，enter 或输入框失焦后直接跳转

• 仅允许输入数字（>=1），当输入的页码超过最大页码时，自动纠正为最大页码后跳转

设置单页展示数

• 单页展示数默认选择第 1 项

• 点击后选择其他选项，选择后即时生效

• 具体选项值业务可定制，建议不超过 4 个选项

实践案例

---

样式

布局

翻页器通常位于页面底部居中或右下角位置。