zent
Version:
一套前端设计语言和基于React的实现
83 lines (60 loc) • 1.93 kB
Markdown
# zent-pagination
[](https://www.npmjs.com/package/zent-pagination) [](https://www.npmjs.com/package/zent-pagination)
分页组件
## 使用指南
**展示条目的总数量必须已知**
#### `pageSize` 属性
支持3种格式
- `{30}`
- `{[10,20,30]}`
初始值为10
- `{[10, 20, {value: 30, isCurrent: true}]}`
初始值为30
## 组件原理
- 组件结构上分为 core-pagination 和 zent-pagination
前者是核心的分页组件, 只提供分页功能, 后者是基于前组件的扩展, 模拟www的交互
- 组件内置独立的parser模块作为数据的中台, 将输入的条目信息统一为 `renderData`.
### parser的输入与输出
#### 输入
`{total: 20, current: 4}`
#### 输出
```javascript
[{
'content': '上一页',
'target': 3
}, {
'content': '1',
'target': 1
}, {
'content': '...',
}, {
'content': '3',
'target': 3,
}, {
'content': '4',
'target': 4,
'current': true,
}, {
'content': '5',
'target': 5
}, {
'content': '...',
'target': 6
}, {
'content': '20'
'target': 20
}, {
'content': '下一页'
'target': 5
}];
```
## API
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
| ------------- | ------- | ------------- | -------- | ---- |
| className | 自定义额外类名 | string | `''` | 否 |
| prefix | 自定义前缀 | string | `'zent'` | 否 |
| current | 当前页数 | number | `1` | 是 |
| totalItem | 总个数 | number | | 是 |
| pageSize | 每页个数 | number, array | `10` | 否 |
| maxPageToShow | 最大可显示页数 | number | | 否 |
| onChange | 翻页回调 | function | | 否 |