# t-pagination

Pagination 分页

t-pagination 组件介绍

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

t-pagination 平台兼容

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

t-pagination 基础用法

基础用法参考 demo/pagination/pagination.uvue，支持多种尺寸、模式与页码类型切换。

<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card class="mb-15"
				title="Pagination 分页"
				sub-title="数据量大,数据分页加载.."></t-card>

		<template v-if="area == 1">
			<t-section title="默认+全部功能开启+主题展示"
					   class="mb-15"></t-section>
			<t-pagination size="mini"
						  class="mb-15"
						  :total="total"
						  type="normal"
						  :current="current"></t-pagination>
			<t-pagination size="mini"
						  class="mb-15"
						  :total="total"
						  type="primary"
						  :current="current"></t-pagination>
			<t-pagination size="mini"
						  class="mb-15"
						  :total="total"
						  type="error"
						  :current="current"></t-pagination>
			<t-pagination size="mini"
						  class="mb-15"
						  :total="total"
						  type="warning"
						  :current="current"></t-pagination>
			<t-pagination size="mini"
						  class="mb-15"
						  :total="total"
						  type="success"
						  :current="current"></t-pagination>
		</template>

		<template v-if="area == 2">
			<t-section title="图标模式"
					   class="mb-15"></t-section>
			<t-pagination size="mini"
						  class="mb-15"
						  :total="total"
						  type="normal"
						  mode="2"
						  :current="current"></t-pagination>
			<t-pagination size="mini"
						  class="mb-15"
						  :total="total"
						  type="primary"
						  mode="2"
						  :current="current"></t-pagination>
			<t-pagination size="mini"
						  class="mb-15"
						  :total="total"
						  type="error"
						  mode="2"
						  :current="current"></t-pagination>
			<t-pagination size="mini"
						  class="mb-15"
						  :total="total"
						  type="warning"
						  mode="2"
						  :current="current"></t-pagination>
			<t-pagination size="mini"
						  class="mb-15"
						  :total="total"
						  type="success"
						  mode="2"
						  :current="current"></t-pagination>
		</template>

		<template v-if="area == 3">
			<t-section title="禁用首页未页按钮"
					   class="mb-15"></t-section>
			<t-pagination size="mini"
						  class="mb-15"
						  :total="total"
						  type="normal"
						  mode="2"
						  :showFirstButton="false"
						  :showLastButton="false"
						  :current="current"></t-pagination>
			<t-pagination size="mini"
						  class="mb-15"
						  :total="total"
						  type="primary"
						  mode="2"
						  :showFirstButton="false"
						  :showLastButton="false"
						  :current="current"></t-pagination>
			<t-pagination size="mini"
						  class="mb-15"
						  :total="total"
						  type="error"
						  mode="2"
						  :showFirstButton="false"
						  :showLastButton="false"
						  :current="current"></t-pagination>
			<t-pagination size="mini"
						  class="mb-15"
						  :total="total"
						  type="warning"
						  mode="2"
						  :showFirstButton="false"
						  :showLastButton="false"
						  :current="current"></t-pagination>
			<t-pagination size="mini"
						  class="mb-15"
						  :total="total"
						  type="success"
						  mode="2"
						  :showFirstButton="false"
						  :showLastButton="false"
						  :current="current"></t-pagination>
		</template>

		<template v-if="area == 4">
			<t-section title="禁用上一页下一页按钮"
					   class="mb-15"></t-section>
			<t-pagination size="mini"
						  class="mb-15 h-35"
						  :total="total"
						  type="normal"
						  mode="2"
						  :showFirstButton="false"
						  :showPreButton="false"
						  :showNextButton="false"
						  :showLastButton="false"
						  :current="current"></t-pagination>
			<t-pagination size="mini"
						  class="mb-15 h-35"
						  :total="total"
						  type="primary"
						  mode="2"
						  :showFirstButton="false"
						  :showLastButton="false"
						  :current="current"
						  :showPreButton="false"
						  :showNextButton="false"></t-pagination>
			<t-pagination size="mini"
						  class="mb-15 h-35"
						  :total="total"
						  type="error"
						  mode="2"
						  :showFirstButton="false"
						  :showLastButton="false"
						  :current="current"
						  :showPreButton="false"
						  :showNextButton="false"></t-pagination>
			<t-pagination size="mini"
						  class="mb-15 h-35"
						  :total="total"
						  type="warning"
						  mode="2"
						  :showFirstButton="false"
						  :showLastButton="false"
						  :current="current"
						  :showPreButton="false"
						  :showNextButton="false"></t-pagination>
			<t-pagination size="mini"
						  class="mb-15 h-35"
						  :total="total"
						  type="success"
						  mode="2"
						  :showFirstButton="false"
						  :showLastButton="false"
						  :current="current"
						  :showPreButton="false"
						  :showNextButton="false"></t-pagination>
		</template>

		<template v-if="area == 5">
			<t-section title="禁用首页未页按钮"
					   class="mb-15"></t-section>
			<t-pagination size="mini"
						  class="mb-15 w-100"
						  :total="total"
						  type="normal"
						  mode="2"
						  pageType="1"
						  :showFirstButton="false"
						  :showLastButton="false"
						  :current="current"></t-pagination>
			<t-pagination size="mini"
						  class="mb-15 w-100"
						  :total="total"
						  type="primary"
						  mode="2"
						  pageType="1"
						  :showFirstButton="false"
						  :showLastButton="false"
						  :current="current"></t-pagination>
			<t-pagination size="mini"
						  class="mb-15 w-100"
						  :total="total"
						  type="error"
						  mode="2"
						  pageType="1"
						  :showFirstButton="false"
						  :showLastButton="false"
						  :current="current"></t-pagination>
			<t-pagination size="mini"
						  class="mb-15 w-100"
						  :total="total"
						  type="warning"
						  mode="2"
						  pageType="1"
						  :showFirstButton="false"
						  :showLastButton="false"
						  :current="current"></t-pagination>
			<t-pagination size="mini"
						  class="mb-15 w-100"
						  :total="total"
						  type="success"
						  mode="2"
						  pageType="1"
						  :showFirstButton="false"
						  :showLastButton="false"
						  :current="current"></t-pagination>
		</template>

		<template v-if="area == 6">
			<t-section title="主题-尺寸-mini"
					   class="mb-15"></t-section>
			<t-pagination pageType="1"
						  size="mini"
						  class="mb-15"
						  :total="total"
						  type="primary"
						  :current="current"></t-pagination>
			<t-section title="主题-尺寸-small"
					   class="mb-15"></t-section>
			<t-pagination pageType="1"
						  class="mb-15"
						  :total="total"
						  type="error"
						  :current="current"
						  size="small"></t-pagination>
			<t-section title="主题-尺寸-medium"
					   class="mb-15"></t-section>
			<t-pagination pageType="1"
						  class="mb-15"
						  :total="total"
						  type="warning"
						  :current="current"
						  size="medium"></t-pagination>
			<t-section title="主题-尺寸-large"
					   class="mb-15"></t-section>
			<t-pagination pageType="1"
						  class="mb-15"
						  :total="total"
						  type="success"
						  :current="current"
						  size="large"></t-pagination>
		</template>

		<view :class="[`tvg fl fww r-10 p-10`]">
			<t-button type="primary"
					  class="mb-15 mr-15"
					  size="small"
					  @click="area = 1">默认+全部功能开启</t-button>
			<t-button type="error"
					  class="mb-15 mr-15"
					  size="small"
					  @click="area = 2">图标模式</t-button>
			<t-button type="primary"
					  class="mb-15 mr-15"
					  size="small"
					  @click="area = 3">禁用首页未页按钮</t-button>
			<t-button type="warning"
					  class="mb-15 mr-15"
					  size="small"
					  @click="area = 4">禁用上一页下一页按钮</t-button>
			<t-button type="primary"
					  class="mb-15 mr-15"
					  size="small"
					  @click="area = 5">简约模式</t-button>
			<t-button type="error"
					  class="mb-15 mr-15"
					  size="small"
					  @click="area = 6">主题尺寸展示</t-button>
		</view>
	</view>
</template>

<script setup
		lang="ts">
	const area = ref(6)
	const current = ref(15)
	const total = ref(300)
</script>

t-pagination 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

t-pagination Events

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

Mode 说明

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

PageType 说明

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