實(shí)例import { useEffect, useRef } from 'react';import { Spin } from 'antd';import type { FsFC } from './types';import './index.less';type LoadMoreProps = { root?: Element | null; // 跟哪個(gè)元素重疊不傳默認(rèn)則是 整個(gè)瀏覽器窗口,一般是父元素 isLoading: boolean; // 用來(lái)判斷如果 沒(méi)有在請(qǐng)求列表才回執(zhí)行 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;// 有重疊，并且沒(méi)有在請(qǐng)求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;

文中注釋已對(duì)代碼進(jìn)行詳解說(shuō)明，以上就是IntersectionObserver實(shí)現(xiàn)加載更多組件demo的詳細(xì)內(nèi)容，更多關(guān)于IntersectionObserver加載組件的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！