README.md

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;