spz-pagination 分页
采用分页的形式分隔长列表,每次只加载一个页面。
布局
跳转到“布局”何时使用
跳转到“何时使用”- 当加载/渲染所有数据将花费很多时间时;
- 可切换页码浏览数据。
代码演示
跳转到“代码演示”基本用法
跳转到“基本用法”分页组件必须结合 spz-list 组件一起使用才生效。它可以自定义上一页下一页的图标,将图标放在分页组件内部且带有 role="arrow" 属性。
<spz-list id="collection-list" manual ...><!-- ... --></spz-list>
<spz-pagination layout="container" list-id="collection-list">
<svg role="arrow" ...><!-- ... --></svg>
</spz-pagination>
属性
跳转到“属性”| 属性名 | 说明 | 类型 | 默认值 | 是否必需 |
|---|---|---|---|---|
| list-id | spz-list元素ID |
string | - | 是 |
| num-display-active | 当前页数前后最大可展示的页数 | number | 2 |
否 |
| show-single-page | 如果存在该属性,当只有一页时仍然展示分页组件 | - | - | 否 |
| track-event-name | 翻页时上报给神策(Sensors Analytics)的埋点事件名称 | string | - | 否 |
方法
跳转到“方法”render
跳转到“render”渲染或重新渲染分页组件,通常由 spz-list 的数据加载完成后调用。
| 参数名 | 说明 | 类型 |
|---|---|---|
| count | 总页数 | number |
| current | 当前页码 | number |
| indexStartAt | 页码起始值,0 或 1 |
number |