scroll-lazy-load
描述
滚动加载组件
ScrollLazyLoad Props
| 属性名 | 类型 | 是否必填 | 描述 | 默认值 |
|---|---|---|---|---|
| loadMore | () => Promise<any> | 是 | 加载更多函数 | - |
| hasMore | (data: any) => Boolean | 是 | 是否还有更多数据需要加载 | - |
| onError | (data: any) => Boolean | 否 | loadMore 请求报错函数 | - |
| renderLoading | () => React.ReactNode | React.ReactNode | 否 | 加载过程中 loading 展示 | Loading... |
| renderNoMore | () => React.ReactNode | React.ReactNode | 否 | 无更多数据需要加载展示 | 暂无更多数据 |
| intersectionConfig | IntersectionConfig | 否 | 详见 IntersectionConfig | - |
IntersectionConfig
| 属性名 | 类型 | 是否必填 | 描述 | 默认值 |
|---|---|---|---|---|
| root | Element | Document | null | 否 | 滚动区域的根节点 | ScrollLazyLoad 组件父节点 |
| rootMargin | string | 否 | � 滚动区域 margin | - |
注：root, rootMargin 参数同 Intersection Observer
例子
import React, { useCallback, useState, useRef } from "react";
import ScrollLazyLoad from "scroll-lazy-load";
const arr = Array(50).fill("test");
const Example = () => {
const container = useRef() as any;
const [rows, setRows] = useState(arr);
const loadMore = useCallback(() => {
const newRows = [...rows].concat(Array(10).fill("test"));
return new Promise((resolve) => {
setTimeout(() => {
setRows(newRows);
const randow = Math.random();
if (randow > 0.5) {
resolve(true);
} else {
resolve(false);
}
}, 1000);
});
}, [rows]);
const hasMoreOrNot = useCallback((data) => {
return data;
}, []);
return (
<div style={{ height: "600px", overflow: "auto" }} ref={container}>
<ScrollLazyLoad
loadMore={loadMore}
hasMore={hasMoreOrNot}
intersectionConfig={{
root: container.current,
rootMargin: "100px",
}}
>
{rows.map((item, index) => {
return <div key={index}>这是第{index + 1}行</div>;
})}
</ScrollLazyLoad>
</div>
);
};
export default Example;
