All Products
Search
Document Center

Pagination

Last Updated: Feb 04, 2021

This section describes the pagination component.

Property Description Type Default value
Mode Form of the button. The value can be text or icon. String text
total Total number of pages. Number 0
current Current page number Number 0
simple Whether to hide the value. Boolean false
disabled Disabled state. Boolean false
prevText Text for the pagination button to return to the previous page. String Previous page
nextText Text for the pagination button to go to the next page. String Next page
btnClass Form of pagination buttons. Only text buttons are valid. String -
onChange Callback when pagination occurs. (index: Number) => void N/A

prevText and nextText are valid only when mode is set to text.

Sample code

  1. {
  2. "defaultTitle": "AntUI component library of the Mini Program",
  3. "usingComponents": {
  4. "pagination": "mini-antui/es/pagination/index"
  5. }
  6. }
  1. <view>
  2. <view class="demo-title">Basic usage</view>
  3. <pagination total="{{20}}" current="{{1}}"/>
  4. <view class="demo-title">Arrow button</view>
  5. <pagination mode="icon" total="{{20}}" current="{{10}}"/>
  6. <view class="demo-title">Basic mode</view>
  7. <pagination simple total="{{20}}" current="{{1}}"/>
  8. <view class="demo-title">Button disabled</view>
  9. <pagination total="{{20}}" current="{{1}}" disabled/>
  10. <view class="demo-title">Custom button text</view>
  11. <pagination arrow prevText="Previous" nextText="Next" total="{{20}}" current="{{1}}"/>
  12. </view>
  1. Page({})