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+antd select下拉框实现模糊搜索匹配的示例代码
我们在开发过程中，经常会出现下拉框数据很多得情况，本文主要介绍了react+antd select下拉框实现模糊搜索匹配的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
这篇文章主要介绍了React图片压缩上传统一处理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-11-11
这篇文章主要介绍了react+ant.d添加全局loading方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要为大家介绍了React构建简洁强大可扩展的前端项目架构实现，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
React 是一个用于构建用户界面的 JAVASCRIPT 库。这篇文章主要介绍了ReactJS中的自定义组件的代码讲解,需要的朋友可以参考下2019-11-11
这篇文章主要介绍了React 父子组件通信的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
React 是由 Facebook 软件工程师 Jordan Walke 创建，React 的第一个版本在七年前问世，现在，Facebook 负责维护,本文给大家介绍React 并发功能体验前端并发模式的问题，感兴趣的朋友跟随小编一起看看吧2021-07-07
这篇文章主要介绍了React控制元素显示隐藏的三种方法小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了react hooks获取数据,文中给大家介绍了useState dispatch函数如何与其使用的Function Component进行绑定，实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-10-10
这篇文章主要介绍了React手稿之 React-Saga的详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
最新评论