# Pagination 分页器
概述
Pagination 分页器，当数据量过多时，使用分页分解数据。
# 支持平台
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
温馨提示 V1.9.5+
由于移动端宽度有限，当 页码展示类型（pageType）为2时，目前最大展示页数固定，当上一页/下一页按钮宽度设置小于等于60rpx时最大展示页数会+2。
pageType 为2时，页面两侧留白不宜过大，避免组件展示不全。
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiPagination from "@/components/firstui/fui-pagination/fui-pagination.vue"
export default {
components:{
fuiPagination
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API。
基础使用
通过 total 属性设置数据总条数。
<fui-pagination :total="100"></fui-pagination>
1
样式调整
通过 total 属性设置数据总条数，color 属性设置按钮文字颜色，background 属性设置按钮背景色，currentColor 属性设置当前页码字体颜色。
<fui-pagination :total="100" color="#FFB703" background="transparent" currentColor="#FFB703"></fui-pagination>
1
页码展开
通过 total 属性设置数据总条数，pageType 属性设置页码展示类型。
<fui-pagination :total="1000" :pageType="2"></fui-pagination>
1
# Slots
| 插槽名称 | 说明 |
|---|---|
| prev | 上一页按钮自定义内容 |
| next | 下一页按钮自定义内容 |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| prevText | String | 上一页按钮显示文本 | 上一页 | - |
| nextText | String | 下一页按钮显示文本 | 下一页 | - |
| width | Number,String | 按钮宽度，单位rpx | 128 | - |
| height | Number,String | 按钮高度，单位rpx | 60 | - |
| borderColor | String | 按钮边框颜色 | transparent | - |
| background | String | 按钮背景颜色 | #fff | - |
| color | String | 按钮字体颜色 | #333 | 非nvue下默认值为空，可通过css变量（--fui-color-section）改变字体颜色 |
| size | Number, String | 按钮字体大小，单位rpx | 28 | - |
| radius | Number, String | 按钮圆角值，单位rpx | 12 | - |
| highlight | Boolean | 按钮是否有点击效果 | true | - |
| custom | Boolean | 是否自定义按钮显示内容 | false | - |
| current | Number, String | 当前页码 | 1 | - |
| currentColor | String | 当前页码字体颜色 | #465CFF | 非nvue下默认值为空，可通过css变量（--fui-color-primary）改变字体颜色 |
| pageColor | String | 页码字体颜色 | #333 | 非nvue下默认值为空，可通过css变量（--fui-color-section）改变字体颜色 |
| pageFontSize | Number, String | 页码字体大小，单位rpx | 36 | - |
| isPage | Boolean | 是否需要展示页码 | true | - |
| pageType V1.9.5+ | Number, String | 页码展示类型 1-简约型 2-展开型 | 1 | - |
| pageBgColor V1.9.5+ | String | 页码背景色，仅pageType=2时生效 | rgba(0,0,0,0) | - |
| activeBgColor V1.9.5+ | String | 当前页码背景色，仅pageType=2时生效 | #465CFF | 非nvue下默认值为空，可通过css变量（--fui-color-primary）改变背景颜色 |
| activeColor V1.9.5+ | String | 当前页码字体颜色，仅pageType=2时生效 | #fff | - |
| total | Number, String | 数据总条数 | 0 | - |
| pageSize | Number, String | 每页的数据条数 | 10 | - |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @change | 页码切换时触发 | { type:按钮类型（prev、next、pageNumber） current:当前页码 } |
Pagination 分页器