无限滚动加载解决方案之虚拟滚动（下）

// index.less.item {  width: 100vw;  height: 240rpx;  border-bottom: 2rpx solid black;}
.test {  height: 110rpx;}
.container {  width: 100vw;  height: 100vh;  overflow: scroll;  -webkit-overflow-scrolling: touch;}

// index.tsximport { createElement, useEffect, useRef, useState } from "rax";import "./index.less";const arr = [];// 模拟一共有2万条数据for (let i = 0; i < 20000; i++) {  arr.push(i);}let i = 1;// 默认第一屏取2页数据const currentArr = arr.slice(0, 40), screenH = window.screen.height;const NODENUM = 20;
function throttle(fn, wait) {  var timeout;  return function() {    var ctx = this, args = arguments;    clearTimeout(timeout);    timeout = setTimeout(function() {      fn.apply(ctx, args);    }, wait);  };}

function Index(props) {  const [start, setStart] = useState(0);  const [end, setEnd] = useState(NODENUM);  const [paddingTop, setPaddingTop] = useState(0);  const [paddingBottom, setPaddingBottom] = useState(0);  const [observer, setObserver] = useState(null);  const $bottomElement = useRef();  const $topElement = useRef();  const $downAnchor:any = useRef();  //定位paddingTop的距离  const $upAnchor:any = useRef(); //定位paddingBottom的距离  const $wrap:any = useRef(); //协助定位paddingBottom的距离  const container = useRef();  const config = useRef({    isRequesting: false,    paddingTopArr: [],  //paddingTop数据栈    paddingBottomArr: [], //paddingBottom数据栈    preScrollTop: 0,    syncStart: 0,    setting: false,  });
  const getReference = (index) => {    switch (index) {      case 0:        return $topElement;      case 5:        return $upAnchor;      case 10:        return $downAnchor;      case (NODENUM - 1):        return $bottomElement;      default:        return null;    }  }

  const resetObservation = () => {    observer && observer.unobserve($bottomElement.current);    observer && observer.unobserve($topElement.current);  }
  const intiateScrollObserver = () => {    const options = {      root: null,      rootMargin: '0px',      threshold: 0.1    };    const Observer = new IntersectionObserver(callback, options);    if ($topElement.current) {      Observer.observe($topElement.current);    }    if ($bottomElement.current) {      Observer.observe($bottomElement.current);    }    setObserver(Observer);  }
  const callback = (entries, observer) => {    entries.forEach((entry, index) => {      const listLength = currentArr.length;      // 向下滚动      if (entry.isIntersecting && entry.target.id === "bottom") {        const maxStartIndex = listLength - 1 - NODENUM;        const maxEndIndex = listLength - 1;        const newStart = (end - 10) <= maxStartIndex ? end - 10 : maxStartIndex;        const newEnd = (end + 10) <= maxEndIndex ? end + 10 : maxEndIndex;        if (newEnd + 10 >= maxEndIndex && !config.current.isRequesting && true) {          currentArr.push(...arr.slice(i * 40, (i + 1)* 40))          i++;        }        if (end + 10 > maxEndIndex) return;        updateState(newStart, newEnd, true);      }      // 向上滚动      if (entry.isIntersecting && entry.target.id === "top") {        const newEnd = end === NODENUM ? NODENUM : (end - 10 > NODENUM ? end - 10 : NODENUM);        const newStart = start === 0 ? 0 : (start - 10 > 0 ? start - 10 : 0);        updateState(newStart, newEnd, false);      }    });  }
const updateState = (newStart, newEnd, isDown) => {  if (config.current.setting) return;  config.current.syncStart = newStart;  if (start !== newStart || end !== newEnd) {    config.current.setting = true;    setStart(newStart);    setEnd(newEnd);    const page = ~~(newStart / 10) - 1;    if (isDown) {  //向下      newStart !== 0 && !config.current.paddingTopArr[page] && (config.current.paddingTopArr[page] = $downAnchor.current.offsetTop);      // setPaddingTop(check ? config.current.paddingTopArr[page] : $downAnchor.current.offsetTop);      setPaddingTop(config.current.paddingTopArr[page]);      setPaddingBottom(config.current.paddingBottomArr[page] || 0);    }else {  //向上      // const newPaddingBottom = $wrap.current.scrollHeight - $upAnchor.current.offsetTop;      const newPaddingBottom = $wrap.current.scrollHeight - $downAnchor.current.offsetTop;      newStart !== 0 && (config.current.paddingBottomArr[page] = newPaddingBottom);      setPaddingTop(config.current.paddingTopArr[page] || 0);      // setPaddingBottom(check ? config.current.paddingBottomArr[page] : newPaddingBottom);      setPaddingBottom(config.current.paddingBottomArr[page]);    }    setTimeout(() => {config.current.setting = false;},0);  }}
useEffect(() => {  document.getElementsByClassName('container')[0].addEventListener('scroll', scrollEventListner);}, [])
  useEffect(() =>  {    resetObservation();    intiateScrollObserver();  }, [end, currentArr])
  const scrollEventListner = throttle(function (event) {    const scrollTop = document.getElementsByClassName('container')[0].scrollTop;    let index = config.current.paddingTopArr.findIndex(e => e > scrollTop);    index = index <= 0 ? 0 : index;    const len = config.current.paddingTopArr.length;    len && (config.current.paddingTopArr[len - 1] < scrollTop) && (index = len);    const newStart = index * 10;    const newEnd = index * 10 + NODENUM;    if (newStart === config.current.syncStart) {      config.current.preScrollTop = scrollTop;      return;    }    updateState(newStart, newEnd, scrollTop > config.current.preScrollTop);  //true为往下滚动  false为往上滚动    config.current.preScrollTop = scrollTop;  }, 100);
  return (    <div className="container">      <div ref={$wrap} style={{ paddingTop: `${paddingTop}px`, paddingBottom: `${paddingBottom}px`, 'position': 'relative' }}>        {currentArr.slice(start, end).map((item, index) => {          const refVal = getReference(index);          const id = index === 0 ? 'top' : (index === (NODENUM - 1) ? 'bottom' : '');          const classValue = index % 4 === 0 ? 'test' : ''          return  <div id={id} ref={refVal} key={item}>              <div className={`item ${classValue}`}>                {item}              </div>            </div>        })}      </div>    </div>  );}
export default Index;