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;