react virtualList 虚拟列表无限滚动实现

Copy 
1const visibleCount = Math.ceil(containerHeight / itemHeight);
2
3const start = Math.floor(scrollTop / itemHeight);
4
5const end = start + visibleCount;
6
7const visibleData = data.slice(start, Math.min(end, data.length));
8
9const offset = scrollTop - (scrollTop % itemHeight);

Copy 
1import "./styles.css";
2import Faker from "faker";
3import { useState, useRef, useEffect, useMemo, useCallback } from "react";
4
5const itemHeight = 100;
6const total = 1000000;
7
8export default function App() {
9  const ref = useRef();
10
11  // 可视区域高度
12  const containerHeight = document.body.clientHeight;
13  // 可显示的列表项数
14  const visibleCount = Math.ceil(containerHeight / itemHeight);
15
16  const [listData, setListData] = useState([]);
17  // 偏移量
18  const [startOffset, setStartOffset] = useState(0);
19  // 起始索引
20  const [start, setStart] = useState(0);
21  // 结束索引
22  const end = start + visibleCount;
23
24  // 列表总高度
25  const listHeight = useMemo(() => {
26    return listData.length * itemHeight;
27  }, [listData]);
28
29  // 获取真实显示列表数据
30  const visibleData = useMemo(() => {
31    return listData.slice(start, Math.min(end, listData.length));
32  }, [listData, start, end]);
33
34  //加载随机数据
35  const getTenListData = useCallback(() => {
36    if (listData.length >= total) {
37      return [];
38    }
39    return new Array(10).fill({}).map((item) => ({
40      id: Faker.random.uuid(),
41      avatar: Faker.image.avatar(),
42      title: Faker.name.firstName(),
43      content: Faker.company.companyName(),
44    }));
45  }, [listData]);
46
47  useEffect(() => {
48    const data = getTenListData();
49    setListData(data);
50  }, []);
51
52  const scrollToTop = () => {
53    ref.current.scrollTo({
54      top: 0,
55      left: 0,
56      behavior: "smooth",
57    });
58  };
59
60  const scrollEvent = useCallback(
61    (e) => {
62      // 当前滚动位置
63      const scrollTop = ref.current.scrollTop;
64      // 此时的开始索引
65      const start = Math.floor(scrollTop / itemHeight);
66      const end = start + visibleCount;
67      setStart(start);
68      if (end >= listData.length) {
69        const data = listData.concat(getTenListData());
70        setListData(data);
71      }
72      // 此时的偏移量
73      const offset = scrollTop;
74      setStartOffset(offset);
75    },
76    [listData, getTenListData, visibleCount]
77  );
78
79  useEffect(() => {
80    let dom = ref.current;
81    scrollEvent();
82    if (dom) {
83      dom.addEventListener("scroll", scrollEvent);
84    }
85    return () => {
86      if (dom) {
87        dom.removeEventListener("scroll", scrollEvent);
88      }
89    };
90  }, [scrollEvent]);
91
92  return (
93    <div className="infinite-list-container" ref={ref}>
94      <div className="scrollTopBtn" onClick={scrollToTop}>
95        ∧
96      </div>
97
98      <div
99        className="infinite-list-phantom"
100        style={{ height: Math.max(listHeight, containerHeight + 1) }}
101      />
102      <div
103        className="infinite-list"
104        style={{ transform: `translate3d(0,${startOffset}px,0)` }}
105      >
106        {visibleData.map((item) => (
107          <div
108            className="infinite-list-item"
109            key={item.id}
110            style={{ height: itemHeight }}
111          >
112            <div
113              className="left-section"
114              style={{ backgroundImage: `url(${item.avatar})` }}
115            ></div>
116            <div className="right-section">
117              <div className="title">{item.title}</div>
118              <div className="desc">{item.content}</div>
119            </div>
120          </div>
121        ))}
122      </div>
123    </div>
124  );
125}