Pagination 分页

带页码导航、上一页与下一页的分页。页码窗口由纯函数 sparkPaginationRange(page, total, siblings) 计算（-1 表示省略号）。

基础用法

SPagination({ total: 10, defaultPage: 2 })

网页近似预览，真机效果以 HarmonyOS 渲染为准。

受控

用 !! 绑定从 1 开始的页码。

@Local page: number = 5;

SPagination({ total: 20, page: this.page!!, siblingCount: 1 })

网页近似预览，真机效果以 HarmonyOS 渲染为准。

响应式

测量自身宽度：窄于 480vp 时文字收起为图标，siblingCount 降为 0。

// below 480vp of its own width: icon-only Previous / Next, no sibling pages
Column() { SPagination({ total: 20, defaultPage: 10 }) }.width(340)

网页近似预览，真机效果以 HarmonyOS 渲染为准。

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

SPagination

shadcn-vue 的 Pagination（作为单个组件渲染）：上一页、页码链接、省略号以及下一页。页码链接使用按钮配方（ghost，当前页为 outline，尺寸为 icon）。

无断点的响应式：分页组件自身宽度小于 480vp 时，「上一页」/「下一页」文字会收为图标，siblingCount 降为 0。页码范围由 {@link sparkPaginationRange} 计算。

属性	类型	默认值	说明
page!!	number | undefined	undefined	受控的当前页码，从 1 开始计数（配合 !! 使用）。留空则为非受控。
defaultPage	number	1
total	number	1	页数。
siblingCount	number	1	当前页两侧显示的页码数量（宽屏布局）。
previousText	ResourceStr	$r('app.string.spark_previous')
nextText	ResourceStr	$r('app.string.spark_next')

事件	类型	默认值	说明
onPageChange	(page: number) => void	() => { }