scroll-lazy-load

描述

滚动加载组件

ScrollLazyLoad Props

| 属性名 | 类型 | 是否必填 | 描述 | 默认值 | | ------------------ | ---------------------------------------- | -------- | ------------------------ | ----------------------- | | loadMore | () => Promise<any> | 是 | 加载更多函数 | - | | hasMore | (data: any) => Boolean | 是 | 是否还有更多数据需要加载 | - | | onError | (data: any) => Boolean | 否 | loadMore 请求报错函数 | - | | renderLoading | () => React.ReactNode | React.ReactNode | 否 | 加载过程中 loading 展示 | Loading... | | renderNoMore | () => React.ReactNode | React.ReactNode | 否 | 无更多数据需要加载展示 | 暂无更多数据 | | intersectionConfig | IntersectionConfig | 否 | 详见 IntersectionConfig | - |

IntersectionConfig

| 属性名 | 类型 | 是否必填 | 描述 | 默认值 | | ---------- | --------------------------- | -------- | ---------------- | ------------------------- | | root | Element | Document | null | 否 | 滚动区域的根节点 | ScrollLazyLoad 组件父节点 | | rootMargin | string | 否 |  滚动区域 margin | - |

注：root, rootMargin 参数同 Intersection Observer

例子

import React, { useCallback, useState, useRef } from "react";
import ScrollLazyLoad from "scroll-lazy-load";

const arr = Array(50).fill("test");

const Example = () => {
  const container = useRef() as any;
  const [rows, setRows] = useState(arr);

  const loadMore = useCallback(() => {
    const newRows = [...rows].concat(Array(10).fill("test"));
    return new Promise((resolve) => {
      setTimeout(() => {
        setRows(newRows);
        const randow = Math.random();
        if (randow > 0.5) {
          resolve(true);
        } else {
          resolve(false);
        }
      }, 1000);
    });
  }, [rows]);

  const hasMoreOrNot = useCallback((data) => {
    return data;
  }, []);

  return (
    <div style={{ height: "600px", overflow: "auto" }} ref={container}>
      <ScrollLazyLoad
        loadMore={loadMore}
        hasMore={hasMoreOrNot}
        intersectionConfig={{
          root: container.current,
          rootMargin: "100px",
        }}
      >
        {rows.map((item, index) => {
          return <div key={index}>这是第{index + 1}行</div>;
        })}
      </ScrollLazyLoad>
    </div>
  );
};

export default Example;