通过交叉实现数据触底分页效果new IntersectionObserver()(html、react、vue2、vue3)中使用

react中用法 

import React, { useState, useEffect, useRef } from 'react';const InfiniteScroll = () => {const [items, setItems] = useState([]);const [loading, setLoading] = useState(false);const [page, setPage] = useState(1);const loaderRef = useRef(null);// 模拟加载更多数据的函数const loadMoreData = () => {if (loading) return; // 防止重复加载setLoading(true);// 模拟异步数据请求setTimeout(() => {const newItems = Array.from({ length: 10 }, (_, index) => `Item ${(page - 1) * 10 + index + 1}`);setItems((prevItems) => [...prevItems, ...newItems]);setPage((prevPage) => prevPage + 1);setLoading(false);}, 1000); // 模拟请求延时};useEffect(() => {// 创建 IntersectionObserverconst observer = new IntersectionObserver(([entry]) => {if (entry.isIntersecting) {loadMoreData(); // 当加载元素进入视口时,触发加载更多数据}},{rootMargin: '0px', // 可根据需要调整,决定何时触发threshold: 1.0, // 触发条件:元素完全进入视口});// 启动观察if (loaderRef.current) {observer.observe(loaderRef.current);}// 清理 observerreturn () => {if (loaderRef.current) {observer.unobserve(loaderRef.current);}};}, [loading, page]);return (<div><div>{items.map((item, index) => (<div key={index}>{item}</div>))}</div>{/* 触底加载元素 */}<div ref={loaderRef}>{loading ? <p>Loading...</p> : <p>Scroll down to load more...</p>}</div></div>);
};export default InfiniteScroll;

原生js中用法 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Infinite Scroll with IntersectionObserver</title><style>body {font-family: Arial, sans-serif;padding: 0;margin: 0;height: 2000px; /* Just to make the page scrollable */}.item {padding: 10px;margin: 10px 0;background-color: #f4f4f4;border: 1px solid #ddd;}#loading {text-align: center;padding: 10px;background-color: #f1f1f1;}</style>
</head>
<body><div id="content"><!-- 初始内容 --><div class="item">Item 1</div><div class="item">Item 2</div><div class="item">Item 3</div><div class="item">Item 4</div><div class="item">Item 5</div></div><!-- 加载更多的提示 --><div id="loading">Loading more...</div><script>// 模拟加载更多数据的函数let page = 1;const loadMoreData = () => {// 模拟异步请求数据setTimeout(() => {const content = document.getElementById('content');for (let i = 0; i < 5; i++) {const newItem = document.createElement('div');newItem.classList.add('item');newItem.textContent = `Item ${page * 5 + i + 1}`;content.appendChild(newItem);}page++;}, 1000); // 模拟1秒的延迟};// 设置 IntersectionObserver 监听“加载更多”元素const loadingElement = document.getElementById('loading');const observer = new IntersectionObserver((entries, observer) => {// 只在元素完全进入视口时触发entries.forEach(entry => {if (entry.isIntersecting) {loadMoreData();observer.unobserve(loadingElement); // 停止监听当前元素observer.observe(loadingElement); // 重新开始监听}});}, {rootMargin: '0px',threshold: 1.0 // 完全进入视口时触发});// 启动 IntersectionObserverobserver.observe(loadingElement);</script>
</body>
</html>

Vue2中使用

<template><div><!-- 内容部分 --><div class="content"><div v-for="(item, index) in items" :key="index" class="item">{{ item }}</div></div><!-- 加载更多提示 --><div id="loading" class="loading">加载更多...</div></div>
</template><script>
export default {data() {return {items: ['Item 1', 'Item 2', 'Item 3'], // 初始数据page: 1, // 当前页数};},mounted() {// 设置 IntersectionObserver 监听加载更多区域const loadingElement = document.getElementById('loading');const observer = new IntersectionObserver(this.handleIntersection, {rootMargin: '0px',threshold: 1.0, // 完全进入视口时触发});observer.observe(loadingElement);},methods: {handleIntersection(entries, observer) {entries.forEach((entry) => {if (entry.isIntersecting) {// 如果加载更多区域进入视口,加载更多数据this.loadMoreData();}});},loadMoreData() {setTimeout(() => {const newItems = Array.from({ length: 5 }, (_, i) => `Item ${this.page * 5 + i + 1}`);this.items.push(...newItems); // 添加新数据this.page += 1; // 增加页码}, 1000); // 模拟网络请求延时},},
};
</script><style>
.content {height: 1500px; /* 让页面滚动 */
}.item {padding: 10px;margin: 10px 0;background-color: #f4f4f4;border: 1px solid #ddd;
}.loading {text-align: center;padding: 10px;background-color: #f1f1f1;
}
</style>

Vue3中使用

<template><div><!-- 内容部分 --><div class="content"><div v-for="(item, index) in items" :key="index" class="item">{{ item }}</div></div><!-- 加载更多提示 --><div id="loading" class="loading">加载更多...</div></div>
</template><script>
import { ref, onMounted } from 'vue';export default {setup() {const items = ref(['Item 1', 'Item 2', 'Item 3']); // 初始数据const page = ref(1); // 当前页数// 加载更多数据的函数const loadMoreData = () => {setTimeout(() => {const newItems = Array.from({ length: 5 }, (_, i) => `Item ${page.value * 5 + i + 1}`);items.value.push(...newItems); // 添加新数据page.value += 1; // 增加页码}, 1000); // 模拟网络请求延时};// 处理 IntersectionObserver 逻辑const handleIntersection = (entries, observer) => {entries.forEach((entry) => {if (entry.isIntersecting) {loadMoreData(); // 如果加载更多区域进入视口,加载更多数据}});};// 在组件挂载时设置 IntersectionObserveronMounted(() => {const loadingElement = document.getElementById('loading');const observer = new IntersectionObserver(handleIntersection, {rootMargin: '0px',threshold: 1.0,});observer.observe(loadingElement);});return { items };},
};
</script><style>
.content {height: 1500px; /* 让页面滚动 */
}.item {padding: 10px;margin: 10px 0;background-color: #f4f4f4;border: 1px solid #ddd;
}.loading {text-align: center;padding: 10px;background-color: #f1f1f1;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/496591.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第十六届“蓝桥杯”全国软件和信息技术专业人才大赛简介及资料大全

蓝桥杯全国软件和信息技术专业人才大赛是由工业和信息化部人才交流中心主办的一项全国性竞赛&#xff0c;面向全国高校大学生&#xff0c;累计参赛院校超过1200余所&#xff0c;参赛人数达40万人&#xff0c;是我国极有影响力的高校IT类赛事。 “第十六届蓝桥杯全国软件和信息…

电子电气架构 --- 什么是自动驾驶技术中的域控制单元(DCU)?

我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 所谓鸡汤&#xff0c;要么蛊惑你认命&#xff0c;要么怂恿你拼命&#xff0c;但都是回避问题的根源&…

yolov5及其算法改进

yolov5及其算法改进 1、YOLOV5目标检测简介2、前处理2.1、自适应 Anchor 计算2.2、自适应计算 Anchor 的流程如下:2.3、图像自适应3、YOLOV4与YOLOV5的架构区别3.1、SiLU激活函数3.2、CSPBlock结构图3.3、yolov5的spp改进4、正负样本匹配与损失函数4.1、坐标表示4.2、正负样本…

WPF 绘制过顶点的圆滑曲线(样条,贝塞尔)

项目中要用到样条曲线&#xff0c;必须过顶点&#xff0c;圆滑后还不能太走样&#xff0c;捣鼓一番&#xff0c;发现里面颇有玄机&#xff0c;于是把我多方抄来改造的方法发出来&#xff0c;方便新手&#xff1a; 如上图&#xff0c;看代码吧&#xff1a; -------------------…

阿里云新用户服务器配置

创建和链接实例 创建实例&#xff0c;点击左侧标签栏总的实例&#xff0c; 找到链接帮助 根据帮助中的ip信息&#xff0c;然后启用vscode的ssh链接 ctrlp选择配置&#xff0c;输入公网的ip即可 passwd修改root密码 安装conda 参考 https://blog.csdn.net/adreammaker/arti…

最新高性能多目标优化算法:多目标麋鹿优化算法(MOEHO)求解LRMOP1-LRMOP6及工程应用---盘式制动器设计,提供完整MATLAB代码

一、麋鹿优化算法 麋鹿优化算法&#xff08;Elephant Herding Optimization&#xff0c;EHO&#xff09;是2024年提出的一种启发式优化算法&#xff0c;该算法的灵感来源于麋鹿群的繁殖过程&#xff0c;包括发情期和产犊期。在发情期&#xff0c;麋鹿群根据公麋鹿之间的争斗分…

Spring事务回滚

Transactional注解 Transactional作用&#xff1a;就是在当前这个方法执行开始之前来开启事务&#xff0c;方法执行完毕之后提交事务。如果在这个方法执行的过程当中出现了异常&#xff0c;就会进行事务的回滚操作。 Transactional注解&#xff1a;我们一般会在业务层当中来控制…

AT24C02学习笔记

看手册&#xff1a; AT24Cxx xx代表能写入xxK bit(xx K)/8 byte 内部写周期很关键&#xff0c;代表每一次页写或字节写结束后时间要大于5ms&#xff08;延时5ms确保完成写周期&#xff09;&#xff0c;否则时序会出错。 页写&#xff1a;型不同号每一页可能写入不同大小的…

Vite内网ip访问,两种配置方式和修改端口号教程

目录 问题 两种解决方式 结果 总结 preview.host preview.port 问题 使用vite运行项目的时候&#xff0c;控制台会只出现127.0.0.1&#xff08;localhost&#xff09;本地地址访问项目。不可以通过公司内网ip访问&#xff0c;其他团队成员无法访问&#xff0c;这是因为没…

Python基础语法知识——列表、字典、元组与集合

列表&#xff08;list&#xff09;、字典(dictionary)、元组(tuple)与集合(set)都可以看成存储数据的容器&#xff0c;但是前两者常用&#xff0c;后两者用得相对较少。 目录 1 列表&#xff08;list) 1.1列表入门 1 列表&#xff08;list) 1.1列表入门 class1["李白…

JVM调优实践篇

理论篇 1多功能养鱼塘&#xff0d;JVM内存 大鱼塘O&#xff08;可分配内存&#xff09;&#xff1a; JVM可以调度使用的总的内存数&#xff0c;这个数量受操作系统进程寻址范围、系统虚拟内存总数、系统物理内存总数、其他系统运行所占用的内存资源等因素的制约。 小池塘A&a…

EKF 自动匹配维度 MATLAB代码

该 M A T L A B MATLAB MATLAB代码实现了扩展卡尔曼滤波( E

C++第五六单元测试

1【单选题】在公有派生类的成员函数不能直接访问基类中继承来的某个成员&#xff0c;则该成员一定是基类中的&#xff08; C &#xff09;。&#xff08;2.0分&#xff09; A、公有成员B、保护成员C、私有成员D、保护成员或私有成员 注意从类外访问与从派生类中访问 2【单…

TDengine 新功能 VARBINARY 数据类型

1. 背景 VARBINARY 数据类型用于存储二进制数据&#xff0c;与 MySQL 中的 VARBINARY 数据类型功能相同&#xff0c;VARBINARY 数据类型长度可变&#xff0c;在创建表时指定最大字节长度&#xff0c;使用进按需分配存储&#xff0c;但不能超过建表时指定的最大值。 2. 功能说明…

rust windwos 两个edit框

use winapi::shared::minwindef::LOWORD; use windows::{core::*,Win32::{Foundation::*,Graphics::Gdi::{BeginPaint, EndPaint, PAINTSTRUCT},System::LibraryLoader::GetModuleHandleA,UI::WindowsAndMessaging::*,}, };// 两个全局静态变量&#xff0c;用于保存 Edit 控件的…

代码随想录Day51 99. 岛屿数量,99. 岛屿数量,100. 岛屿的最大面积。

1.岛屿数量深搜 卡码网题目链接&#xff08;ACM模式&#xff09;(opens new window) 题目描述&#xff1a; 给定一个由 1&#xff08;陆地&#xff09;和 0&#xff08;水&#xff09;组成的矩阵&#xff0c;你需要计算岛屿的数量。岛屿由水平方向或垂直方向上相邻的陆地连接…

邮箱手机号脱敏

项目场景&#xff1a; 提示&#xff1a;这里简述项目相关背景&#xff1a; 输入框的脱敏&#xff0c;当输入的时候显示正常&#xff0c;失去焦点部分显示**** 问题描述 提示&#xff1a;这里描述项目中遇到的问题&#xff1a; 脱敏可以封装 一下成为一个方法&#xff0c;挂…

C语言----变量与常量

目录 变量 变量的分类 常量 分类&#xff1a; 1. 字符型常量 2. 字符串常量 3. 整形常量 4. 浮点型常量 5. 指数常量 6. 标识常量 变量 概念&#xff1a;在程序运行中发生改变的量 定义格式&#xff1a; 存储类型(一般存储类型是可以省略的) 数据类型 变量名 aut…

SQLite本地数据库的简介和适用场景——集成SpringBoot的图文说明

前言&#xff1a;现在项目普遍使用的数据库都是MySQL&#xff0c;而有些项目实际上使用SQLite既足矣。在一些特定的项目中&#xff0c;要比MySQL更适用。 这一篇文章简单的介绍一下SQLite&#xff0c;对比MySQL的优缺点、以及适用的项目类型和集成SpringBoot。 1. SQLite 简介 …

线性代数行列式

目录 二阶与三阶行列式 二元线性方程组与二阶行列式 三阶行列式 全排列和对换 排列及其逆序数 对换 n阶行列式的定义 行列式的性质 二阶与三阶行列式 二元线性方程组与二阶行列式 若是采用消元法解x1、x2的话则得到以下式子 有二阶行列式的规律可得&#xff1a;分…