# Pagination 分页器

概述

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

# 支持平台

App-vue App-Nvue 微信小程序 支付宝小程序 钉钉小程序 百度小程序 字节小程序 QQ小程序 H5/PC

# 引入

以下介绍两种常用的引入方式。
第一种:在页面中引用、注册
import fuiPagination from "@/components/firstui/fui-pagination/fui-pagination.vue"
export default {
	components:{
		fuiPagination
	}
}
1
2
3
4
5
6
第二种:easycom组件规范
传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。

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

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

# 代码演示

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

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

<fui-pagination :total="100"></fui-pagination>
1
样式调整

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

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

# Slots

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

# Props

属性名 类型 说明 默认值 平台差异说明
prevText String 上一页按钮显示文本 上一页 -
nextText String 下一页按钮显示文本 下一页 -
width Number,String 按钮宽度,单位rpx 160 -
height Number,String 按钮高度,单位rpx 64 -
borderColor String 按钮边框颜色 transparent -
background String 按钮背景颜色 #fff -
color String 按钮字体颜色 #333 非nvue下默认值为空,可通过css变量(--fui-color-section)改变字体颜色
size Number, String 按钮字体大小,单位rpx 28 -
radius Number, String 按钮圆角值,为-1则使用按钮高度值,单位rpx -1 -
highlight Boolean 按钮是否有点击效果 true -
custom Boolean 是否自定义按钮显示内容 false -
current Number, String 当前页码 1 -
currentColor String 当前页码字体颜色 #465CFF 非nvue下默认值为空,可通过css变量(--fui-color-primary)改变字体颜色
pageColor String 页码字体颜色 #333 非nvue下默认值为空,可通过css变量(--fui-color-section)改变字体颜色
pageFontSize Number, String 页码字体大小,单位rpx 36 -
isPage Boolean 是否需要展示页码 true -
total Number, String 数据总条数 0 -
pageSize Number, String 每页的数据条数 10 -

# Events

事件名 说明 回调参数
@change 页码切换时触发 {
  type:按钮类型(prev、next)
  current:当前页码
}

示例预览

# 示例代码地址

FirstUIPagination 分页器

# 示例代码地址

FirstUIPagination 分页器
Last Updated: 9/29/2022, 1:07:59 AM