脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → IntersectionObserver加载组件

IntersectionObserver实现加载更多组件demo

 更新时间：2023年07月12日 09:17:06   作者：Best_白水  
这篇文章主要为大家介绍了IntersectionObserver实现加载更多组件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; // 用来判断如果 没有在请求列表才回执行
  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实现加载更多组件demo的详细内容，更多关于IntersectionObserver加载组件的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 详解React中父子组件数据传递和修改的方式及原理

    详解React中父子组件数据传递和修改的方式及原理

    这篇文章主要为大家详细介绍了React中父子组件数据传递和修改的方式及原理,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-04-04
  • React Zustand状态管理库的使用详解

    React Zustand状态管理库的使用详解

    Zustand是一个为React和浏览器环境设计的轻量级状态管理库,由Vercel开发,它特点包括轻量级、易用性、灵活性、可组合性和性能优化,支持多种状态管理模式和中间件,适合中小型项目,Zustand还支持TypeScript,提供类型安全的支持
    2024-09-09
  • 浅谈React-router v6 实现登录验证流程

    浅谈React-router v6 实现登录验证流程

    本文主要介绍了React-router v6 实现登录验证流程，主要介绍了公共页面、受保护页面和登录页面，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • 解决React在安装antd之后出现的Can''t resolve ''./locale''问题(推荐)

    解决React在安装antd之后出现的Can''t resolve ''./locale''问题(推荐)

    这篇文章主要介绍了解决React在安装antd之后出现的Can't resolve './locale'问题,本文给大家分享解决方案，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-05-05
  • React如何避免子组件无效刷新

    React如何避免子组件无效刷新

    这篇文章主要介绍了React几种避免子组件无效刷新的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • React+高德地图实时获取经纬度,定位地址

    React+高德地图实时获取经纬度,定位地址

    思路其实没有那么复杂，把地图想成一个盒子容器，地图中心点想成盒子中心点；扎点在【地图中心点】不会动，当移动地图时，去获取【地图中心点】经纬度，设置某个位置的时候，将经纬度设置为【地图中心点】即可
    2021-06-06
  • React为什么需要Scheduler调度器原理详解

    React为什么需要Scheduler调度器原理详解

    这篇文章主要为大家介绍了React为什么需要Scheduler调度器原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10
  • React跨路由组件动画实现

    React跨路由组件动画实现

    在 React 中路由之前的切换动画可以使用 react-transition-group 来实现,但对于不同路由上的组件如何做到动画过渡是个很大的难题,目前社区中也没有一个成熟的方案,本文给大家分享React跨路由组件动画实现,感兴趣的朋友一起看看吧
    2023-10-10
  • Ant Design 组件库之步骤条实现

    Ant Design 组件库之步骤条实现

    这篇文章主要为大家介绍了Ant Design组件库之步骤条实现，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • React 数据获取与性能优化详解

    React 数据获取与性能优化详解

    这篇文章主要为大家介绍了React 数据获取与性能优化方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10

最新评论