IntersectionObserver實現(xiàn)加載更多組件demo
更新時間：2023年07月12日 09:17:06 作者：Best_白水
這篇文章主要為大家介紹了IntersectionObserver實現(xiàn)加載更多組件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; // 用來判斷如果 沒有在請求列表才回執(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;
// 有重疊，并且沒有在請求
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實現(xiàn)加載更多組件demo的詳細內(nèi)容，更多關(guān)于IntersectionObserver加載組件的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
詳解React中父子組件數(shù)據(jù)傳遞和修改的方式及原理
這篇文章主要為大家詳細介紹了React中父子組件數(shù)據(jù)傳遞和修改的方式及原理,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
Zustand是一個為React和瀏覽器環(huán)境設(shè)計的輕量級狀態(tài)管理庫,由Vercel開發(fā),它特點包括輕量級、易用性、靈活性、可組合性和性能優(yōu)化,支持多種狀態(tài)管理模式和中間件,適合中小型項目,Zustand還支持TypeScript,提供類型安全的支持2024-09-09
淺談React-router v6 實現(xiàn)登錄驗證流程
本文主要介紹了React-router v6 實現(xiàn)登錄驗證流程，主要介紹了公共頁面、受保護頁面和登錄頁面，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
解決React在安裝antd之后出現(xiàn)的Can''t resolve ''./locale''問題(推薦)
這篇文章主要介紹了解決React在安裝antd之后出現(xiàn)的Can't resolve './locale'問題,本文給大家分享解決方案，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05
這篇文章主要介紹了React幾種避免子組件無效刷新的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
思路其實沒有那么復(fù)雜，把地圖想成一個盒子容器，地圖中心點想成盒子中心點；扎點在【地圖中心點】不會動，當(dāng)移動地圖時，去獲取【地圖中心點】經(jīng)緯度，設(shè)置某個位置的時候，將經(jīng)緯度設(shè)置為【地圖中心點】即可2021-06-06
React為什么需要Scheduler調(diào)度器原理詳解
這篇文章主要為大家介紹了React為什么需要Scheduler調(diào)度器原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
在 React 中路由之前的切換動畫可以使用 react-transition-group 來實現(xiàn),但對于不同路由上的組件如何做到動畫過渡是個很大的難題,目前社區(qū)中也沒有一個成熟的方案,本文給大家分享React跨路由組件動畫實現(xiàn),感興趣的朋友一起看看吧2023-10-10
這篇文章主要為大家介紹了Ant?Design組件庫之步驟條實現(xiàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
React 數(shù)據(jù)獲取與性能優(yōu)化詳解
這篇文章主要為大家介紹了React 數(shù)據(jù)獲取與性能優(yōu)化方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10