快捷導(dǎo)航

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