UNPKG

zent

Version:

一套前端设计语言和基于React的实现

83 lines (60 loc) 1.93 kB
# zent-pagination [![npm version](https://img.shields.io/npm/v/zent-pagination.svg?style=flat)](https://www.npmjs.com/package/zent-pagination) [![downloads](https://img.shields.io/npm/dt/zent-pagination.svg)](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 | | 否 |