IBest-UI-V2

Appearance

Pagination 分页 ​

介绍 ​

数据量过多时，采用分页的形式将数据分隔，每次只加载一个页面。

引入 ​

ts
import { IBestPagination } from "@ibestservices/ibest-ui-v2";

代码演示 ​

基础用法 ​

基础用法

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local currentPage: number = 1
  build() {
    Column() {
      IBestPagination({
        currentPage: this.currentPage!!,
        totalItems: 24,
        itemsPerPage: 5,
        onChange: (value: number) => {
          console.log('当前页码:', value)
        }
      })
    }
  }
}

简单模式 ​

简单模式

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local currentPage: number = 1
  build() {
    Column() {
      IBestPagination({
        currentPage: this.currentPage!!,
        pageCount: 12,
        mode: 'simple'
      })
    }
  }
}

自定义样式 ​

自定义样式

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local currentPage: number = 1
  build() {
    Column() {
      IBestPagination({
        currentPage: this.currentPage!!,
        totalItems: 24,
        itemsPerPage: 5,
        textColor: "#ddd",
        bgColor: "#13ce66",
        activeBgColor: "#f56c6c"
      })
    }
  }
}

显示省略号 ​

显示省略号

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local currentPage: number = 1
  build() {
    Column() {
      IBestPagination({
        currentPage: this.currentPage!!,
        totalItems: 125,
        showPageSize: 3,
        forceEllipses: true
      })
    }
  }
}

自定义按钮 ​

自定义按钮

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local currentPage: number = 1
  build() {
    Column() {
      IBestPagination({
        currentPage: this.currentPage!!,
        totalItems: 125,
        showPageSize: 5,
        prevText: 'prev',
        nextText: 'next'
      })
    }
  }
}

API ​

@Props ​

参数说明类型默认值
currentPage当前页码, 支持双向绑定number''
mode分页显示模式, 可选值 simple、multistringmulti
prevText上一页按钮文本ResourceStr上一页
nextText下一页按钮文本ResourceStr下一页
textColor文本颜色ResourceColor#1989fa
activeTextColor文本选中颜色ResourceColor#fff
disabledTextColor文本禁用颜色ResourceColor#646566
bgColor背景颜色ResourceColor#fff
activeBgColor背景选中颜色ResourceColor#1989fa
disabledBgColor背景禁用颜色ResourceColor#f7f8fa
bdColor边框颜色ResourceColor#f5f5f7
pageCount总页数number | string''
totalItems总数量number | string''
showPageSize每页显示页码数number | string5
itemsPerPage每页条目数number | string10
forceEllipses是否显示省略号booleanfalse
showPrevButton是否显示上一页按钮booleantrue
showNextButton是否显示下一页按钮booleantrue

Events ​

事件名说明回调参数
onChange页码变化时触发page: number