感谢您的反馈！
-
用户反馈
用户反馈
网络异常，请重新提交！
重新提交
| 参数 | 说明 | 类型 | 默认值 |
| 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>