如何用IntersectionObserver实现长尾词的加载更多功能？

本文共计235个文字，预计阅读时间需要1分钟。

jsximport { useEffect, useRef } from 'react';import { Spin } from 'antd';import type { FsFC } from './types';import './index.less';

type LoadMoreProps={ root?: HTMLElement | 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加载组件的资料请关注自由互联其它相关文章！