Pagination 分页器

根据总条数和每页数量切换页码，支持自定义上一页和下一页内容。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 页码变化时在页面中加载对应数据 -->
<fui-pagination :current="page" :total="100" :pageSize="10" @change="handlePageChange" />

属性

尺寸和间距单位为 rpx。

属性	类型	说明	官网默认值
prevText	String	上一页文字	上一页
nextText	String	下一页文字	下一页
width	Number / String	按钮宽度	128
height	Number / String	按钮高度	60
borderColor	String	按钮边框色	transparent
background	String	按钮背景色	#fff
color	String	按钮文字颜色	#333
size	Number / String	按钮字号	28
radius	Number / String	按钮及页码圆角	12
highlight	Boolean	是否显示点击反馈	true
custom	Boolean	是否使用自定义按钮内容	false
current	Number / String	当前页码，从 1 开始	1
currentColor	String	简约型当前页文字颜色	#465CFF
pageColor	String	页码文字颜色	#333
pageFontSize	Number / String	简约型页码字号	36
isPage	Boolean	是否显示页码	true
pageType	Number / String	1 简约型、2 展开型	1
pageBgColor	String	展开型页码背景色	rgba(0,0,0,0)
activeBgColor	String	展开型当前页背景色	#465CFF
activeColor	String	展开型当前页文字颜色	#fff
total	Number / String	数据总条数	0
pageSize	Number / String	每页条数	10

事件

事件	说明	回调参数
change	切换页码	{ type, current }；type 为 prev、next 或 pageNumber

custom 为 true 时，可通过 prev、next 插槽自定义按钮内容。

平台说明

非 nvue 平台的默认颜色部分通过 --fui-color-section 和 --fui-color-primary 控制。

插槽

插槽	说明
prev	自定义上一页内容
next	自定义下一页内容