@xwink/ui

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
0-0,共 0 条
1 / 1

请求只在客户端发:示例在 onMounted 里 reload() / goTo(1),服务端与首帧按「还没拉过」(page 为 0)出骨架,两端一致。

返回值

名称类型说明
itemsRef<T[]>当前的列表
pageRef<number>已经拿到的最后一页(1 起),还没拿过是 0
pageSizenumber每页条数
totalRef<number | undefined>后端给的总数
loadingRef<boolean>正在请求
errorRef<unknown>上次请求的错误,有值即出错
hasMoreComputedRef<boolean>还没到底
loadMore()() => Promise<void>拉下一页;正在拉、到底了、出错了(等重试)都不拉
reload()() => Promise<void>从第一页重来(换了筛选、排序)
refresh()() => Promise<void>原地刷新:一次拉回已加载的那几页,数据变了不跳回顶;打断了正在拉的下一页时,落定后补拉
goTo(page)(page: number) => Promise<void>翻到第几页(翻页模式)
retry()() => Promise<void>重做出错的那次请求:刷新失败就重做刷新,而不是去拉下一页——否则新数据接在旧数据后面