Pagination 分页器

分隔长列表，每次只加载一个页面。

使用指南

在 page.json 中引入组件

  1. {
  2.     "navigationBarTitleText": "Pagination",
  3.     "usingComponents": {
  4.         "wux-pagination": "../../dist/pagination/index"
  5.     }
  6. }

示例

  1. <view class="page">
  2.     <view class="page__hd">
  3.         <view class="page__title">Pagination</view>
  4.         <view class="page__desc">分页器</view>
  5.     </view>
  6.     <view class="page__bd page__bd_spacing">
  7.         <view class="sub-title">Button with text</view>
  8.         <wux-pagination defaultCurrent="1" total="5">
  9.             <view slot="prev">Prev</view>
  10.             <view slot="next">Next</view>
  11.         </wux-pagination>
  12.         <view class="sub-title">Controlled</view>
  13.         <wux-pagination current="{{ current }}" total="5" mode="button" controlled bind:change="onChange">
  14.             <view slot="prev">Prev</view>
  15.             <view slot="next">Next</view>
  16.         </wux-pagination>
  17.         <view class="sub-title">Hide number</view>
  18.         <wux-pagination defaultCurrent="1" total="5" simple>
  19.             <view slot="prev">Prev</view>
  20.             <view slot="next">Next</view>
  21.         </wux-pagination>
  22.         <view class="sub-title">Show number only</view>
  23.         <wux-pagination defaultCurrent="1" total="5" mode="number">
  24.             <view slot="prev">Prev</view>
  25.             <view slot="next">Next</view>
  26.         </wux-pagination>
  27.         <view class="sub-title">Point style</view>
  28.         <wux-pagination defaultCurrent="1" total="5" mode="pointer">
  29.             <view slot="prev">Prev</view>
  30.             <view slot="next">Next</view>
  31.         </wux-pagination>
  32.     </view>
  33. </view>
  1. Page({
  2.     data: {
  3.         current: 1,
  4.     },
  5.     onChange(e) {
  6.         console.log('onChange', e)
  7.         this.setData({
  8.             current: e.detail.current,
  9.         })
  10.     },
  11. })

视频演示

Pagination

API

Pagination props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-pagination
mode string 形态，可选值为 button、number、pointer button
defaultCurrent number 默认页号，当 controlled 为 false 时才生效 1
current number 当前页号，当 controlled 为 true 时才生效 1
controlled boolean 是否受控 说明文档 false
total number 总页数 0
simple boolean 是否隐藏数值 false
bind:change function change 事件触发的回调函数 -

Pagination slot

名称 描述
prev 自定义左侧按钮内容
next 自定义右侧按钮内容

Pagination externalClasses

名称 描述
wux-class 根节点样式类