Pagination 分页器 3.4.30

分页器组件主要用于数据分页场景

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

使用示例

<template>
	<view class="u-page">
		<view class="u-demo-block">
			<view class="u-demo-block__title">基础</view>
			<view class="u-demo-block__content">
				<u-pagination
				    :current-page="currentPage"
				    :page-size="pageSize"
				    :total="total"
				    :page-sizes="pageSizes"
				    layout="prev, total, next"
				    @current-change="handleCurrentChange"
				    @size-change="handleSizeChange"
				  />
			</view>
		</view>
		<view class="u-demo-block">
			<view class="u-demo-block__title">上一页下一页文案</view>
			<view class="u-demo-block__content">
				<u-pagination
					prevText="上一页"
					nextText="下一页"
				    :current-page="currentPage"
				    :page-size="pageSize"
				    :total="total"
				    :page-sizes="pageSizes"
				    layout="prev, total, next"
				    @current-change="handleCurrentChange"
				    @size-change="handleSizeChange"
				  />
			</view>
		</view>
		<view class="u-demo-block">
			<view class="u-demo-block__title">显示分页切换</view>
			<view class="u-demo-block__content">
				<u-pagination
				    :current-page="currentPage"
				    :page-size="pageSize"
				    :total="total"
				    :page-sizes="pageSizes"
				    layout="prev, pager, next"
				    @current-change="handleCurrentChange"
				    @size-change="handleSizeChange"
				  />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			  currentPage: 1,
			  pageSize: 10,
			  total: 100
			}
		},
		methods: {
			handleCurrentChange(page) {
			  console.log('当前页:', page);
			  this.currentPage = page;
			},
			handleSizeChange(size) {
			  console.log('每页条数:', size);
			  this.pageSize = size;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 24rpx;
	}
</style>

### 📄 Props 参数说明

参数	说明	类型	默认值	可选值
currentPage	当前页码	Number	1	-
pageSize	每页条目数	Number	10	-
total	总数据条目数	Number	0	-
prevText	上一页按钮自定义文本	String	''	-
nextText	下一页按钮自定义文本	String	''	-
buttonBgColor	分页按钮的背景颜色	String	#f5f7fa	-
buttonBorderColor	分页按钮的边框颜色	String	#dcdfe6	-
pageSizes	每页显示条目个数选择器的选项	Array	[10, 20, 30, 40, 50]	-
layout	组件布局，子组件名用逗号分隔。支持：prev, pager, next, total	String	'prev, pager, next'	-
hideOnSinglePage	是否在只有一页时隐藏分页器	Boolean	false	true / false

---

### 📢 Events 事件说明

事件名	说明	参数
@update:currentPage	页码改变时触发（v-model）	page
@update:pageSize	每页数量改变时触发（v-model）	size
@current-change	页码改变时触发	page
@size-change	每页条目数改变时触发	size

---

### 🧩 插槽说明（Slot）

插槽名	说明	参数
default	默认插槽（暂未使用）	-

---

✅ 支持的 layout 项

layout 项	说明
prev	上一页按钮
pager	页码列表
next	下一页按钮
total	显示总页数信息