useLoadMore

useLoadMore 用于实现 加载更多 / 无限滚动 场景：首屏加载一页数据，随后通过按钮或滚动条持续追加后续数据。

基础用法

useLoadMore 加载更多按钮

返回值

const result = useLoadMore<TData>(service, options)

字段	类型	说明
current	Ref<number>	当前页码
pageSize	Ref<number>	每页条数
total	Ref<number>	总数
totalPages	Ref<number>	总页数
data	ShallowRef<TData | undefined>	数据（通常为数组或带 list 的对象）
loading	Ref<boolean>	首屏加载中
refreshing	Ref<boolean>	刷新中
loadingMore	Ref<boolean>	正在加载更多
error	ShallowRef<unknown>	错误
params	Ref<unknown[]>	额外参数
noMore	Ref<boolean>	是否没有更多
canLoadMore	Ref<boolean>	是否可以加载更多
loadMore()	—	加载下一页并追加数据
reload()	—	重置并重新加载
refresh()	—	刷新当前数据
pagination	—	一组分页工具方法（与 usePagination 接口兼容）

配置项

useLoadMore(service, options) 的第一个参数为请求函数 service(page, pageSize, ...args)，第二个参数为配置项：

interface UseLoadMoreOptions<TData, TParams extends unknown[]> {
  initialPage?: number // 初始页码，默认 1
  pageSize?: number // 每页条数，默认 10
  isLoadMore?: boolean // 是否允许加载更多，默认 true
  threshold?: number // 无限滚动触底阈值（预留）
  loadMoreService?: (page: number, pageSize: number) => Promise<RequestResponse<TData>> // 加载更多时使用的请求（可与 service 不同）
  onSuccess?: (data: TData, params: TParams) => void
  onError?: (error: unknown, params: TParams) => void
  onFinally?: (params: TParams) => void
  manual?: boolean // 是否手动触发首次加载
  defaultParams?: TParams // 除 page、pageSize 外的额外参数
}

结合分页方法与滚动加载（防止页码漂移）

当无限滚动容器与特定的分页或页码跳转逻辑（例如调用 pagination.loadPage(n)）结合使用时，列表数据替换（从长列表缩短为单页列表）可能由于 DOM 尺寸变化或滚动位置改变立即自动触发滚动容器 of 滚动事件，进而导致意外调用 loadMore()，引起页码漂移（如跳转到第 n 页后立刻漂移加载 n + 1 页）。

为了解决该问题：

1. 内置冷却保护：useLoadMore 内部已内置了针对 reload / refresh / loadPage 的 100ms 冷却保护。在刷新/切换页码完成后 100ms 内，任何滚动自动触发的 loadMore 都将被忽略。
2. 业务端防抖/重置：在业务逻辑中，执行 loadPage 等跳转操作时，推荐显式将滚动容器的滚动位置重置回顶部 el.scrollTop = 0，以彻底规避浏览器的布局滚动触发。

以下演示了滚动触底加载更多，并在控制面板通过 goToPage 安全导航。

滚动加载与分页安全切换

与 usePagination 的关系

• usePagination：适合「有明确分页控件」的场景（页码切换）
• useLoadMore：适合「瀑布流 / 无限滚动」场景（不断往下追加）

两者的 pagination 返回值基本兼容，可以在需要时互相切换实现方式。