React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > IntersectionObserver加载组件

IntersectionObserver实现加载更多组件demo

作者:Best_白水

这篇文章主要为大家介绍了IntersectionObserver实现加载更多组件demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

 实例

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加载组件的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文