IntersectionObserver實(shí)現(xiàn)加載更多組件demo

更新時(shí)間：2023年07月12日 09:17:06 作者：Best_白水

這篇文章主要為大家介紹了IntersectionObserver實(shí)現(xiàn)加載更多組件demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

實(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)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

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