参数 | 说明 | 类型 | 默认值 |
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 | (非受控)初始页码 | Number | 1 |
onChange | 页码发生改变时的回调函数 签名: Function(current: Number, e: Object) => void 参数: current: {Number} 改变后的页码数 e: {Object} 点击事件对象 |
Function | () => {} |
total | 总记录数 | Number | 100 |
pageShowCount | 页码显示的数量,更多的使用...代替 | Number | 5 |
pageSize | 一页中的记录数 | Number | 10 |
pageSizeSelector | 每页显示选择器类型 可选值: false, 'filter', 'dropdown' |
Enum | false |
pageSizeList | 每页显示选择器可选值 | Array<Number>/Array<Object> | [5, 10, 20] |
pageSizePosition | 每页显示选择器在组件中的位置 可选值: 'start', 'end' |
Enum | 'start' |
useFloatLayout | 存在每页显示选择器时是否使用浮动布局 | Boolean | false |
onPageSizeChange | 每页显示记录数量改变时的回调函数 签名: Function(pageSize: Number) => void 参数: pageSize: {Number} 改变后的每页显示记录数 |
Function | () => {} |
hideOnlyOnePage | 当分页数为1时,是否隐藏分页器 | Boolean | false |
showJump | type 设置为 normal 时,在页码数超过5页后,会显示跳转输入框与按钮,当设置 showJump 为 false 时,不再显示该跳转区域 | Boolean | true |
<view class="com-wrap"> <view class="com-title">大小</view> <view class="com-sub-title">smalll</view> <pagination defaultCurrent="{{2}}" shape="arrow-prev-only" size="small" /> <view class="com-sub-title">medium</view> <pagination defaultCurrent="{{2}}" size="medium" /> <view class="com-sub-title">large</view> <pagination defaultCurrent="{{2}}" size="large" /> <view class="com-title">分页类型</view> <view class="com-sub-title">normal</view> <pagination defaultCurrent="{{2}}" type="normal" /> <view class="com-sub-title">simple</view> <pagination defaultCurrent="{{2}}" type="simple" /> <view class="com-sub-title">mini</view> <pagination defaultCurrent="{{2}}" type="mini" /> <view class="com-title">分页尺寸</view> <view class="com-sub-title">To hidden per page size selector</view> <pagination pageSizeSelector="{{false}}" /> <view class="com-sub-title">Type per page size selector of is dropdown,and as for the tail of the entire component</view> <pagination pageSizeSelector="dropdown" pageSizePosition="end" onPageSizeChange={handlePageSizeChange} /> <view class="com-sub-title">Filter type per page size selector, and use floating layout</view> <pagination pageSizeSelector="filter" onPageSizeChange={handlePageSizeChange} useFloatLayout /> <view class="com-title">事件</view> <view class="com-sub-title">onChange</view> <pagination defaultCurrent="{{2}}" onChange="onChange" /> <view class="com-sub-title">onPageSizeChange</view> <pagination pageSizeSelector="dropdown" onPageSizeChange="onPageSizeChange" /> <view class="com-sub-title">medium</view> <pagination defaultCurrent="{{2}}" size="medium" /> <view class="com-sub-title">large</view> <pagination total="1100" pageSize="200" hideOnlyOnePage="true" defaultCurrent="{{2}}" size="large" /> <view class="com-title">显示每页可选的值</view> <pagination defaultCurrent="3" total="100" pageShowCount="5" pageSize="4" pageSizeSelector="dropdown" pageSizeList="{{[10, 20, 30]}}"/> </view>