Pagination 分页器 V1.1.0+

概述

Pagination 分页器，当数据量过多时，使用分页分解数据。

温馨提示

• 使用该组件 需要 同时引入 fui-types 类型文件。
• 该组件内置了国际化配置，使用该组件，必须同时引入 fui-lang 所有文件。

支持平台

目前开发小程序与H5推荐使用 FirstUI nvue版本 (opens new window)。

安卓系统版本	安卓uni-app	安卓uniapp-x	iOS系统版本	iOS uniapp	iOS uniapp-x	小程序	H5/Web
5.0	×	✓	9.0	×	×	×	✓

特别说明

• 由于移动端宽度有限，当 页码展示类型（pageType）为2时，目前最大展示页数固定，当上一页/下一页按钮宽度设置小于等于60rpx时最大展示页数会+2。

• pageType 为2时，页面两侧留白不宜过大，避免组件展示不全。

引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiPagination from "@/components/firstui/fui-pagination/fui-pagination.uvue"
export default {
	components:{
		fuiPagination
	}
}

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手。

如果不了解easycom，可先查看 官网文档 (opens new window)。

代码演示

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

通过 total 属性设置数据总条数。

<fui-pagination :total="100"></fui-pagination>

样式调整

通过 total 属性设置数据总条数，color 属性设置按钮文字颜色，background 属性设置按钮背景色，currentColor 属性设置当前页码字体颜色。

<fui-pagination :total="100" color="#FFB703" background="transparent"
	currentColor="#FFB703"></fui-pagination>

页码展开

通过 total 属性设置数据总条数，pageType 属性设置页码展示类型。

<fui-pagination :total="1000" :pageType="2"></fui-pagination>

Slots

插槽名称	说明
prev	上一页按钮自定义内容
next	下一页按钮自定义内容

Props

属性名	类型	说明	默认值	平台差异说明
prevText	String	上一页按钮显示文本	上一页	-
nextText	String	下一页按钮显示文本	下一页	-
width	Number	按钮宽度，单位rpx	128	-
height	Number	按钮高度，单位rpx	60	-
borderColor	String	按钮边框颜色	transparent	-
background	String	按钮背景颜色	#fff	-
color	String	按钮字体颜色	#333	-
size	Number	按钮字体大小，单位rpx	28	-
radius	Number	按钮圆角值，单位rpx	12	-
highlight	Boolean	按钮是否有点击效果	true	-
current	Number	当前页码	1	-
currentColor	String	当前页码字体颜色	#465CFF	-
pageColor	String	页码字体颜色	#333	-
pageFontSize	Number	页码字体大小，单位rpx	36	-
isPage	Boolean	是否需要展示页码	true	-
pageType	Number	页码展示类型 1-简约型 2-展开型	1	-
pageBgColor	String	页码背景色，仅pageType=2时生效	rgba(0,0,0,0)	-
activeBgColor	String	当前页码背景色，仅pageType=2时生效	#465CFF	-
activeColor	String	当前页码字体颜色，仅pageType=2时生效	#fff	-
total	Number	数据总条数	0	-
pageSize	Number	每页的数据条数	10	-

Events

事件名	类型	说明	回调参数
@change	(event: FuiPaginationChangeParam) => void	页码切换时触发	FuiPaginationChangeParam

FuiPaginationChangeParam

/**
* fui-pagination 分页器 组件 @change 事件 回调参数类型
* @description Pagination 分页器组件 change 事件 回调参数类型
* @param {string} type {string} 按钮类型（prev、next、pageNumber）
* @param {number} current {number} 当前页码
*/
export type FuiPaginationChangeParam = {
	type : string;
	current : number;
}

/*页面引入*/
import { FuiPaginationChangeParam } from '@/components/firstui/fui-types/index.uts'

示例预览

示例代码地址

Pagination 分页器