scroll-lazy-load

滚动加载组件


Keywords
scroll, lazy-load
License
ISC
Install
npm install scroll-lazy-load@1.0.2

Documentation

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;