useInfiniteScroll
一个进行探底检测（精确检测容器滚动到底部的状态），并调用提供的回调函数的 React Hook，常用来实现简单的自定义滚动加载逻辑。
如果你需要更多更全、更业务化、高度集成的丰富功能，可以查看 useInfiniteList。
演示
用法
请查看 API。
源码
API
const { isLoading, isLoadDone } = useInfiniteScroll(elementTarget, onLoadMore, options)
元素目标 ElementTarget
ElementTarget 是一个联合类型，代表可以被定位的各种元素。
更多详情，请参见 ElementTarget 或 ElementTarget 类型。
当加载更多时 onLoadMore
当滚动事件被触发时将会调用的函数。
type OnLoadMoreCallback = (previousReturn: R | undefined) => R | Promise<R>
选项 Options
export type UseInfiniteScrollOptions<T extends HTMLElement = HTMLElement> = {
/**
* 距离滚动容器底部的距离
*
* @defaultValue 0
*/
distance?: number
/**
* 滚动方向
*
* @defaultValue 'bottom'
*/
direction?: 'top' | 'bottom' | 'left' | 'right'
/**
* 每次滚动事件之间的间隔
*
* @defaultValue 100
*/
interval?: number
/**
* 检查是否还可以加载更多
*/
canLoadMore?: (el: T) => boolean
/**
* 滚动事件回调函数
*/
onScroll?: (event: Event) => void
}
返回值
export type UseInfiniteScrollReturns = {
/**
* 加载状态
*/
isLoading: boolean
/**
* 加载完成状态
*/
isLoadDone: boolean
}
