react-virtual-list
react不定高虚拟列表，支持高度自动计算。
VirtualListProps
| 名称 | 描述 | 默认值 |
|---|---|---|
| renderItem | 子项渲染函数 | (data: T, index: number)=>ReactNode |
| bufferSize | 缓存大小 | 5 |
| itemOffset | 每一项的间隔 | 10 |
| estimateHeight | 每一项预期高度 | 100 |
| empty | 数据为空时渲染的节点 | '暂无数据～' |
| rowKey | 每行的key值 | 无 |
| onScroll | 无 | |
| request | 请求数据方式 | |
| pagination | 分页配置 | {current: 1, pageSize: 20} |
| loadingRender | loading时渲染的节点 | |
| noMoreRender | 没有更多时渲染的节点 |
Example
import { useState } from "react";
import VirtualList from "@wenghongtian/react-virtual-list";
import from "@wenghongtian/react-virtual-list/lib/style.css"
const sleep = (timeout: number) => {
return new Promise<void>((resolve) => {
setTimeout(() => {
resolve();
}, timeout);
});
};
function getRandomColor() {
const letters = "0123456789ABCDEF";
let color = "#";
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function getRandomHeight() {
return (Math.random() * 300 + 100) | 0;
}
function Item(props: {
name: string;
color: string;
delayHeight: number;
height: number;
}) {
const [height, setHeight] = useState(props.height);
// useEffect(() => {
// setTimeout(() => {
// setHeight(props.delayHeight);
// }, 500);
// }, []);
return (
<div style={{ backgroundColor: props.color, height }}>
<div>{props.name}</div>
<button onClick={() => setHeight(getRandomHeight)}>设置高度</button>
</div>
);
}
type Data = {
name: string;
color: string;
height: number;
delayHeight: number;
id: string;
};
const App = () => {
return (
<div style={{ height: "100%" }}>
<VirtualList<Data>
renderItem={(data) => {
return <Item {...data} />;
}}
request={async ({ pageSize, current }) => {
await sleep(1000);
return {
list: new Array(10).fill("").map((_i, index) => ({
name: Math.random() + "",
color: getRandomColor(),
height: getRandomHeight(),
delayHeight: getRandomHeight(),
id: pageSize * (current - 1) + index + "",
})),
noMore: current > 5,
};
}}
/>
</div>
);
};
export default App;