快捷導(dǎo)航

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中history(push,go,replace)切換路由方法的區(qū)別及說明
這篇文章主要介紹了react中history(push,go,replace)切換路由方法的區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
react中使用signal的項目實踐
本文主要介紹了react中使用signal的項目實踐,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2026-03-03
react中的useImperativeHandle()和forwardRef()用法
這篇文章主要介紹了react中的useImperativeHandle()和forwardRef()用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
在React中實現(xiàn)Vue的插槽功能的示例代碼
在?Vue?中,插槽（Slots）允許父組件向子組件傳遞?HTML?結(jié)構(gòu),從而實現(xiàn)更靈活的組件復(fù)用,具名插槽允許父組件向子組件傳遞多個不同的?HTML?結(jié)構(gòu),在?React?中,我們沒有直接的插槽概念,但可以通過?props.children?和函數(shù)作為?props?來實現(xiàn)類似的功能
2025-01-01
詳解react native頁面間傳遞數(shù)據(jù)的幾種方式
這篇文章主要介紹了詳解react native頁面間傳遞數(shù)據(jù)的幾種方式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11
React中Provider組件詳解(使用場景)
這篇文章主要介紹了React中Provider組件使用場景,使用Provider可以解決數(shù)據(jù)層層傳遞和每個組件都要傳props的問題,本文結(jié)合示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
2024-02-02
react native實現(xiàn)往服務(wù)器上傳網(wǎng)絡(luò)圖片的實例
下面小編就為大家?guī)硪黄猺eact native實現(xiàn)往服務(wù)器上傳網(wǎng)絡(luò)圖片的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
記錄一次完整的react hooks實踐
這篇文章主要介紹了記錄一次完整的react hooks實踐，通過一個簡單示例，介紹了react hooks，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-03-03
回顧Javascript React基礎(chǔ)
這篇文章主要介紹了Javascript React基礎(chǔ)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的同學(xué)可以參考一下
2019-06-06
react項目優(yōu)化配置的操作詳解
這篇文章主要介紹了react項目優(yōu)化配置,主要包括優(yōu)化配置CDN，優(yōu)化路由懶加載，結(jié)合示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-06-06