Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | import { DependencyList, useEffect } from 'react' import { useLoadMore, UseLoadMoreResult, UseLoadMoreService, } from './useLoadMore' import { useReachBottom } from './useReachBottom' /** * @public */ export interface UseScrollLoadMoreOptions { /** * 距离底部偏移量(单位:像素),小于该值时触发加载。 * * @default 0 */ offset?: number /** * 滚动容器,默认以窗口作为滚动容器。 * * @default window */ containerRef?: ReturnType<typeof useReachBottom> } /** * 滚动数据加载。 * * @public * @param service 数据加载服务 * @param deps 依赖,依赖若发生变化则从首页重新加载数据 * @param options 滚动选项 * @returns 返回结果 */ export function useScrollLoadMore<TItem>( service: UseLoadMoreService<TItem>, deps: DependencyList, options: UseScrollLoadMoreOptions = {}, ): UseLoadMoreResult<TItem> { const loader = useLoadMore(service, deps) const containerRef = useReachBottom(loader.loadMore, options.offset || 0) useEffect(() => { if (options.containerRef && options.containerRef.current) { ;(containerRef as any).current = options.containerRef.current } }, [options.containerRef && options.containerRef.current]) return loader } |