脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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 路由Link配置详解

    react 路由Link配置详解

    本文主要介绍了react 路由Link配置详解，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-11-11
  • 使用react-virtualized实现图片动态高度长列表的问题

    使用react-virtualized实现图片动态高度长列表的问题

    一般我们在写react项目中,同时渲染很多dom节点,会造成页面卡顿, 空白的情况。为了解决这个问题，今天小编给大家分享一篇教程关于react-virtualized实现图片动态高度长列表的问题，感兴趣的朋友跟随小编一起看看吧
    2021-05-05
  • 详解React Native开源时间日期选择器组件(react-native-datetime)

    详解React Native开源时间日期选择器组件(react-native-datetime)

    本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime)，具有一定的参考价值，有兴趣的可以了解一下
    2017-09-09
  • React中的常用Hooks分享

    React中的常用Hooks分享

    React 提供了许多常用的 Hooks，用于在函数组件中添加状态管理、副作用处理和其他功能，本文主要介绍了其中几个常用的，需要的可以收藏一下
    2023-07-07
  • Can't perform a React state update on an unmounted component报错解决

    Can't perform a React state update on an unmoun

    这篇文章主要为大家介绍了Can't perform a React state update on an unmounted component报错解决方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • react-redux的connect用法详解

    react-redux的connect用法详解

    react-redux是react官方推出的redux绑定库，React-Redux 将所有组件分成两大类一个是UI组件和容器组件，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
    2023-01-01
  • React Hook父组件如何获取子组件的数据/函数

    React Hook父组件如何获取子组件的数据/函数

    这篇文章主要介绍了React Hook父组件如何获取子组件的数据/函数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • React事件处理过程中传参的实现方法

    React事件处理过程中传参的实现方法

    这篇文章主要介绍了React事件处理过程中传参的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
    2022-10-10
  • 使用Ant Design Anchor组件的一个坑及解决

    使用Ant Design Anchor组件的一个坑及解决

    这篇文章主要介绍了使用Ant Design Anchor组件的一个坑及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • react项目自行配置热更新的实现

    react项目自行配置热更新的实现

    本文主要介绍了react项目自行配置热更新的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-11-11

最新评论