t-pagination

Pagination 分页

组件介绍

分页组件，用于显示和操作分页数据，支持多种配置，包括尺寸、展示模式、页码类型等。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

<template>
  <view class="pagination-demo">
    <t-pagination 
      :total="100" 
      :pageSize="10" 
      :current="1"
      @change="onPageChange"
    ></t-pagination>
    
    <t-pagination 
      :total="100" 
      :pageSize="10" 
      :current="1"
      pageType="1"
      @change="onPageChange"
    ></t-pagination>
  </view>
</template>

<script setup>
function onPageChange(page) {
  console.log('当前页码:', page);
}
</script>

<style scoped>
.pagination-demo {
  padding: 40rpx;
}
</style>

Props

属性名	类型	默认值	说明	可选值
size	String	"medium"	组件尺寸	large, medium, small, mini
type	String	"primary"	组件类型	info, primary, error, warning, success
disabled	Boolean	false	组件是否禁用	true, false
hover	Boolean	false	是否有点击效果	true, false
path	String	""	点击组件后跳转的页面路径	-
effect	String	"normal"	组件显示主题	normal, dark, light, plain
mode	String	"1"	按钮展示模式	1: 文字按钮, 2: 图标按钮
pageType	String	"2"	页码展示类型	1: 简约型, 2: 展开型
preText	String	"上一页"	上一页的文本	-
nextText	String	"下一页"	下一页的文本	-
showPreButton	Boolean	true	是否显示上一页按钮	true, false
showNextButton	Boolean	true	是否显示下一页按钮	true, false
current	Number	1	当前页码	-
total	Number	0	数据总数	-
pageSize	Number	10	每页数据量	-
firstText	String	"首页"	首页的文本	-
lastText	String	"末页"	末页的文本	-
showFirstButton	Boolean	true	是否显示首页按钮	true, false
showLastButton	Boolean	true	是否显示末页按钮	true, false

Events

事件名	说明	回调参数
change	当前页码发生变化时触发	当前页码
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成触发	组件的节点信息
touchstart	触摸开始时触发	触摸事件对象
touchend	触摸结束时触发	触摸事件对象
touchmove	触摸移动时触发	触摸事件对象
touchcancel	触摸取消时触发	触摸事件对象

Mode 说明

模式值	说明	显示方式
1	文字按钮	显示"上一页"、"下一页"等文字
2	图标按钮	显示箭头图标按钮

PageType 说明

类型值	说明	显示方式
1	简约型	显示"当前页/总页数"
2	展开型	显示页码按钮列表