Page 分页

概述

当数据量较多时，使用分页可以快速进行数据切换。

使用指南

在 .json 中引入组件

  1. "usingComponents": {
  2.     "i-page": "../../dist/page/index"
  3. }

示例

  1. 带有文字的按钮
  3. <i-page current="{{ current }}" total="5" bind:change="handleChange">
  4.     <view slot="prev">Prev</view>
  5.     <view slot="next">Next</view>
  6. </i-page>
  8. 带有文字和图标的按钮
  10. <i-page current="{{ current }}" total="5" bind:change="handleChange">
  11.     <view slot="prev">
  12.         <i-icon type="return"></i-icon>
  13.         上一步
  14.     </view>
  15.     <view slot="next">
  16.         下一步
  17.         <i-icon type="enter"></i-icon>
  18.     </view>
  19. </i-page>
  21. 隐藏数字
  23. <i-page current="{{ current }}" total="5" simple bind:change="handleChange">
  24.     <view slot="prev">Prev</view>
  25.     <view slot="next">Next</view>
  26. </i-page>
  28. 只显示数字
  30. <i-page current="{{ current }}" total="5" mode="number" bind:change="handleChange"></i-page>
  32. 显示点
  34. <i-page current="{{ current }}" total="5" mode="pointer" bind:change="handleChange"></i-page>
  1. Page({
  2.     data: {
  3.         current: 1
  4.     },
  5.     handleChange ({ detail }) {
  6.         const type = detail.type;
  7.         if (type === 'next') {
  8.             this.setData({
  9.                 current: this.data.current + 1
  10.             });
  11.         } else if (type === 'prev') {
  12.             this.setData({
  13.                 current: this.data.current - 1
  14.             });
  15.         }
  16.     }
  17. });

API

Panel properties

属性说明类型默认值
i-class自定义 class 类名String-
mode类型，可选值为 button、number、pointerStringbutton
current当前页码Number1
total总页数Number0
simple是否隐藏数值Booleanfalse

Page events

事件名说明返回值
bind:change切换页码时触发，返回 prev 或 next{ type }