Pagination 翻页器

使用场景:当需要大量内容显示时,就会使用分页器来处理。

非受控分页

非受控分页,是指分页组件的状态由自己维护,组件值的改变可以通过 onChange 事件通知父组件,默认值由 defaultCurrent 初始化。

Loading demo...

APIs

Pagination

参数说明类型默认值
size分页组件大小

可选值:
'small', 'medium', 'large'
Enum'medium'
type分页组件类型

可选值:
'normal', 'simple', 'mini'
Enum'normal'
shape前进后退按钮样式

可选值:
'normal', 'arrow-only', 'arrow-prev-only', 'no-border'
Enum'normal'
current(受控)当前页码Number-
defaultCurrent(非受控)初始页码Number1
onChange页码发生改变时的回调函数

签名:
Function(current: Number, e: Object) => void
参数:
current: {Number} 改变后的页码数
e: {Object} 点击事件对象
Function() => {}
total总记录数Number100
totalRender总数的渲染函数

签名:
Function(total: Number, range: Array) => void
参数:
total: {Number} 总数
range: {Array} 当前数据在总数中的区间
Function-
pageShowCount页码显示的数量,更多的使用...代替Number5
pageSize一页中的记录数Number10
pageSizeSelector每页显示选择器类型

可选值:
false, 'filter', 'dropdown'
Enumfalse
pageSizeList每页显示选择器可选值Array<Number>/Array<Object>[5, 10, 20]
pageNumberRender自定义页码渲染函数,函数作用于页码button以及当前页/总页数的数字渲染

签名:
Function(index: Number) => ReactNode
参数:
index: {Number} 分页的页码,从1开始
返回值:
{ReactNode} 返回渲染结果
Functionindex => index
pageSizePosition每页显示选择器在组件中的位置

可选值:
'start', 'end'
Enum'start'
useFloatLayout存在每页显示选择器时是否使用浮动布局Booleanfalse
onPageSizeChange每页显示记录数量改变时的回调函数

签名:
Function(pageSize: Number) => void
参数:
pageSize: {Number} 改变后的每页显示记录数
Function() => {}
hideOnlyOnePage当分页数为1时,是否隐藏分页器Booleanfalse
showJumptype 设置为 normal 时,在页码数超过5页后,会显示跳转输入框与按钮,当设置 showJump 为 false 时,不再显示该跳转区域Booleantrue
link设置页码按钮的跳转链接,它的值为一个包含 {page} 的模版字符串,如:https://www.taobao.com/{page}String-
popupProps弹层组件属性,透传给PopupObject-

Demo

受控分页

Loading demo...

分页尺寸

Loading demo...

分页类型

Loading demo...

前进后退按钮只显示箭头

Loading demo...

每页显示

Loading demo...

显示总数

Loading demo...

分页按钮连接

Loading demo...