文档中心 > 店铺动态卡片-开发指引

pagination

更新时间:2020/08/26 访问次数:4163

API

 

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 (非受控)初始页码 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

  

Demo示例

 

示例

 

<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>

 

FAQ

关于此文档暂时还没有FAQ
返回
顶部