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

| 参数 | 说明 | 类型 | 默认值 | 必填 | | ----------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ------- | | listStyle | 列容器的样式 |   CSSProperties | - | false | | listClssName | 列容器的样式名 |   string | - | false | | height | 滚动外层容器高度 |   number ¦ string | - | true | | footer | 底部额外渲染 |   ReactNode | - | false | | showCount | 可视区域展示的最大数量, 高度不一的时候按全部最小高度展示去计算 |   number | - | true | | gap | 可视区域展示的最大数量 |   number | - | false | | dataSource | 数据源，数组 |   Array | - | true | | ItemRender | 自定义渲染每一项 |   FunctionComponent<    {      item: T      index?: number    } & ViewProps  > | - | true | | renderBackToTop | 自定义回到顶部按钮渲染 |   ReactNode | - | false | | backToTopSuccess | 成功返回顶部后执行 |   () => void | - | false | | backToTopCritical | 展示返回顶端按钮的临界值，上方隐藏了多少个 ItemRender |   number | VirtualHalfList的为showCount乘 2,VirtualWaterfallList的为showCount | false |

组件实例

| 方法 | 说明 | 类型 | | --------- | -------- | --------------------------------------- | | reset | 重置状态 |   () => void | | backToTop | 返回顶部 |   () => void |