usePagedList
列表的数据侧,与 CardList 配对(也能接任何列表):
ts
import { usePagedList } from '@xwink/ui'
const list = usePagedList(
(page, size, signal) => api.list({ page, size }, { signal }), // 返回 { items, total? }
{ pageSize: 20, mode: 'append' },
)
mode:append一页页接在后面(无限加载,缺省)/replace每次换成那一页(翻页)。- 过期响应一律丢弃并 abort:换筛选重拉时旧请求可能后到,写回去列表就串了;旧请求收到
AbortSignal,能停的尽早停。 - 到底:这一页是空的、不满一页、或累计到了
total。后端不给总数也判得出来,越界给空页时也不会一直拉。 - 出错是独立状态,不当成「没有更多」,用户才看得到重试入口。
无限加载
接 XCardList 的 load-more / retry
已加载 0 / 46
翻页
mode: replace + goTo
请求只在客户端发:示例在 onMounted 里 reload() / goTo(1),服务端与首帧按「还没拉过」(page 为 0)出骨架,两端一致。
返回值
| 名称 | 类型 | 说明 |
|---|---|---|
items | Ref<T[]> | 当前的列表 |
page | Ref<number> | 已经拿到的最后一页(1 起),还没拿过是 0 |
pageSize | number | 每页条数 |
total | Ref<number | undefined> | 后端给的总数 |
loading | Ref<boolean> | 正在请求 |
error | Ref<unknown> | 上次请求的错误,有值即出错 |
hasMore | ComputedRef<boolean> | 还没到底 |
loadMore() | () => Promise<void> | 拉下一页;正在拉、到底了、出错了(等重试)都不拉 |
reload() | () => Promise<void> | 从第一页重来(换了筛选、排序) |
refresh() | () => Promise<void> | 原地刷新:一次拉回已加载的那几页,数据变了不跳回顶;打断了正在拉的下一页时,落定后补拉 |
goTo(page) | (page: number) => Promise<void> | 翻到第几页(翻页模式) |
retry() | () => Promise<void> | 重做出错的那次请求:刷新失败就重做刷新,而不是去拉下一页——否则新数据接在旧数据后面 |