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总页数string | number''
totalItems总数量string | number''
showPageSize每页显示页码数string | number5
itemsPerPage每页条目数string | number10
forceEllipses是否显示省略号booleanfalse
showPrevButton是否显示上一页按钮booleantrue
showNextButton是否显示下一页按钮booleantrue

Events ​

事件名说明事件类型
onChange页码变化时触发(page: number) => void

主题定制 ​

组件提供了下列颜色变量，可用于自定义深色/浅色模式样式，使用方法请参考 颜色模式 章节，如需要其它颜色变量可提 issue。

名称描述默认值
ibest_pagination_background分页器背景色#fff
ibest_pagination_active_background分页器激活态背景色#1989fa
ibest_pagination_text_color分页器文字颜色#1989fa
ibest_pagination_active_text_color分页器激活态文字颜色#fff
ibest_pagination_item_disabled_color分页器禁用时文字颜色#646566
ibest_pagination_item_disabled_background分页器禁用时背景色#f7f8fa
ibest_pagination_desc_color分页器描述文字颜色#646566
ibest_pagination_border_color分页器边框颜色#f5f5f7