react-waterfall-virtual-list v0.0.1-alpha.1

react-waterfall-virtual-list

适用于移动端的瀑布流虚拟列表

install

npm i react-waterfall-virtual-list -S

基本使用

和 antdMoblie 的 PullToRefresh 和 InfiniteScroll 搭配使用

export default function Demo() {
  const [data, setdata] = React.useState([]);
  const VirtualListInstance = React.useRef();

  const loadMore = async () => {
    const reslult = await mockGoods();
    const newData = [].concat(data, reslult);
    if (Math.random() < 0.05) {
      throw new Error("mock request failed");
    }
    setdata(newData);
  };

  const onRefresh = async () => {
    const reslult = await mockGoods();
    await VirtualListInstance.current.reset();
    setdata(reslult);
    resolve();
  };

  return (
    <PullToRefresh onRefresh={onRefresh}>
      <VirtualWaterfallList
        style={{
          boxSizing: "border-box",
          height: "calc(100vh - 12px)",
        }}
        ref={VirtualListInstance}
        dataSource={data}
        showCount={10}
        gap={4}
        footer={<InfiniteScroll loadMore={loadMore} hasMore={true} />}
        ItemRender={React.memo(({ index, item, className, ...props }) => {
          return (
            <div
              className={`van-demo-goods-item-wrapper ${className}`}
              {...props}
            >
              <div className="van-demo-goods-item">
                <img src={item.image} className="img" />
                <div className="title">{item.title}</div>
                {item.isCutPrice && (
                  <span className="cutPrice">最近大降价</span>
                )}
                <div className="price">{item.price}</div>
              </div>
            </div>
          );
        })}
      />
    </PullToRefresh>
  );
}

Demo online

在线查看

API

props

组件实例