分页是用于将内容或数据分成多个页面，并具有导航到下一页或上一页，或输入跳转到具体页码的控件。
每一页显示若干个条目，避免在大量信息中迷失。
用法
用于解决海量信息展示、滚动条过长不方便用户查看。
适用：搜索结果页、列表页等，有信息查找诉求的场景。
不适用：无明确查找目的的信息浏览场景。
通用原则
- 翻页器默认定位在第一页
- 当页面数 > 10 的时候，需要提供快速跳转页面的功能
- 单页展示的内容数最好不低于 10 个
格式
类型
| 类型 | 何时使用 |
|---|---|
| 常规 | 默认分页，能满足较大数据量，便于用户需要灵活查找内容 |
常规
- 拥有最完整的功能，按需使用「总信息、快速跳转、单页展示数设定」
- 当页面数 ＜ 10 的时候，页码完整展示，无需隐藏中间页码
- 当页面数 ≥ 10 的时候：
- 默认展示前 5 页及最后 1 页，中间页码「···」省略
- 切换到中间页码的时候，展示第 1 页、最后 1 页，及当前页的前后 2 页
迷你（暂时无用）
拥有总信息统计、翻页和快速定位功能视觉轻量，占位少可根据实际需要，显示「总信息统计」
构成
- 翻页+页码
- 点击上下翻页跳转到临近页面
- 当无页面时，上下翻页不可用
- 当页面数 ＜ 10 的时候，直接铺开，无需省略
- 单页展示数设置（可选）
- 快速跳转（可选）
- 输入框激活时，默认填充的页码为当前页的下一页
- 用户可随意输入想要跳转的页码，当输入值超过最大页数时，自动纠正为最大页码
- 总信息数（可选）
- 准确展示页码统计和结果总数
位置
通常位于页面底部右下角位置。
行为
切换页
- 点击页码，刷新列表进入指定页
- 点击上一页/下一页逐页切换
- 当无上一页/下一页的时候，「上/下一页」不可用
跳转页
- 激活快速跳转时，默认为当前页的下一页，enter 或输入框失焦后直接跳转
- 亦可输入具体页码，enter 或输入框失焦后直接跳转
- 仅允许输入数字（>=1），当输入的页码超过最大页码时，自动纠正为最大页码后跳转
设置单页展示数
- 单页展示数默认选择第 1 项
- 点击后选择其他选项，选择后即时生效，刷新列表
若有收获，就点个赞吧
0 人点赞
