water-design-recycle v1.0.1

综述

在可视区上下各一屏区间外的元素将会自动回收，随着滚动亦将会及时自动回显。

使用

import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
// 可通过以下方法导入
import { Recycle, RecycleItem } from 'water-design-recycle';
// import Recycle from 'water-design-recycle';
// const { RecycleItem } = Recycle;

const getData = (index = 1) => {
  return new Array(index)
    .fill(new Array(10).fill(1).map((node, index) => index))
    .reduce((current, item) => {
      return [...current, ...item];
    }, []);
};

const App: React.FC = () => {
  const [list, setList] = useState<number[]>(getData());

  React.useEffect(() => {
    const handleScroll = () => {
      const distantBottom = Math.abs(
        document.documentElement.offsetHeight -
          document.documentElement.clientHeight -
          window.scrollY
      );

      if (distantBottom < 1) {
        // 触底
        setList((prev) => [...prev, ...getData()]);
      }
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <Recycle>
      {list.map((item, index) => (
        <RecycleItem key={index} style={{ height: 350, marginBottom: '20px' }}>
          <div style={{ height: 350, backgroundColor: 'skyblue' }}>{index}</div>
        </RecycleItem>
      ))}
    </Recycle>
  );
};
const root = createRoot(document.getElementById('root')!);
root.render(<App />);

Recycle API

RecycleItem API

注意

若是在 item 项 children 里设置 margin，由于 wrapper 拿不到包含子项和 margin 值，会导致滚动后拿到的 height 不含 margin，因此若需设置 margin，则在 RecycleItem 以样式属性传入即可。