Pagination 分页器

概述

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

温馨提示 V1.9.5+

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

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

引入

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

第一种：在页面json文件中引入

{
  "navigationBarTitleText": "分页器",
  "usingComponents": {
    "fui-pagination": "/components/firstui/fui-pagination/fui-pagination"
  }
}

第二种：在根目录app.json文件中全局引入

"usingComponents": {
    "fui-pagination": "components/firstui/fui-pagination/fui-pagination"
  }

代码演示

部分示例演示，完整使用请参考示例程序以及文档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,String	按钮宽度，单位rpx	128	-
height	Number,String	按钮高度，单位rpx	60	-
borderColor	String	按钮边框颜色	transparent	-
background	String	按钮背景颜色	#fff	-
color	String	按钮字体颜色	-	如果值为空，可通过css变量（--fui-color-section）改变字体颜色
size	Number, String	按钮字体大小，单位rpx	28	-
radius	Number, String	按钮圆角值，单位rpx	12	-
highlight	Boolean	按钮是否有点击效果	true	-
custom	Boolean	是否自定义按钮显示内容	false	-
current	Number, String	当前页码	1	-
currentColor	String	当前页码字体颜色	-	如果值为空，可通过css变量（--fui-color-primary）改变字体颜色
pageColor	String	页码字体颜色	-	如果值为空，可通过css变量（--fui-color-section）改变字体颜色
pageFontSize	Number, String	页码字体大小，单位rpx	36	-
isPage	Boolean	是否需要展示页码	true	-
pageType V1.9.5+	Number, String	页码展示类型 1-简约型 2-展开型	1	-
pageBgColor V1.9.5+	String	页码背景色，仅pageType=2时生效	rgba(0,0,0,0)	-
activeBgColor V1.9.5+	String	当前页码背景色，仅pageType=2时生效	-	如果值为空，可通过css变量（--fui-color-primary）改变背景颜色
activeColor V1.9.5+	String	当前页码字体颜色，仅pageType=2时生效	#fff	-
total	Number, String	数据总条数	0	-
pageSize	Number, String	每页的数据条数	10	-

Events

事件名	说明	回调参数
bind:change	页码切换时触发	event.detail = {   type:按钮类型（prev、next、pageNumber）   current:当前页码 }

示例预览