IntersectionObserver實現加載更多組件demo

實例 import { useEffect, useRef } from 'react';import { Spin } from 'antd';import type { FsFC } from './types';import './index.less';type LoadMoreProps = { root?: Element | null; // 跟哪個元素重疊不傳默認則是 整個瀏覽器窗

?實例

import { useEffect, useRef } from 'react';
import { Spin } from 'antd';
import type { FsFC } from './types';
import './index.less';
type LoadMoreProps = {
  root?: Element | null; // 跟哪個元素重疊不傳默認則是 整個瀏覽器窗口,一般是父元素
  isLoading: boolean; // 用來判斷如果 沒有在請求列表才回執行
  more: () => void;
};
const LoadMore: FsFC<LoadMoreProps> = ({ root = null, isLoading, more }) => {
  const loadMoreRef = useRef(null);
  /** 建立加載更多觀察者 */
  const loadMoreOb = () => {
    if (!loadMoreRef.current) {
      return;
    }
    const ob = new IntersectionObserver(
      (entries) => {
        const [entry] = entries;
        // 有重疊，并且沒有在請求
        if (entry.isIntersecting && !isLoading) {
          more();
        }
      },
      {
        root,
        threshold: 1,
      },
    );
    ob.observe(loadMoreRef.current);
  };
  useEffect(() => {
    loadMoreOb();
  }, []);
  return (
    <div className="load-more" ref={loadMoreRef}>
      <Spin />
    </div>
  );
};
export default LoadMore;

文中注釋已對代碼進行詳解說明，以上就是IntersectionObserver實現加載更多組件demo的詳細內容，更多關于IntersectionObserver加載組件的資料請關注技圈網其它相關文章！

【文章原創作者：美國服務器 https://www.68idc.cn處的文章,轉載請說明出處】