Vue 和 React 框架实现滚动缓冲区

Vue 实现

<template><div id="app" @scroll="handleScroll"><!-- 页面内容 --><div v-for="item in items" :key="item">{{ item }}</div></div>
</template><script>
export default {data() {return {items: [],bufferSize: 100,isLoading: false,};},methods: {handleScroll(event) {// 获取滚动元素const scrollElement = event.target;// 获取当前滚动位置const scrollTop = scrollElement.scrollTop;// 获取滚动元素的高度const scrollHeight = scrollElement.scrollHeight;// 获取窗口的高度const clientHeight = scrollElement.clientHeight;// 计算滚动到底部的距离const distanceToBottom = scrollHeight - (scrollTop + clientHeight);// 如果距离底部小于缓冲区大小且未在加载中,加载更多内容if (distanceToBottom < this.bufferSize &&!this.isLoading) {this.isLoading = true;// 模拟加载更多数据setTimeout(() => {for (let i = 0; i < 10; i++) {this.items.push(`新数据 ${this.items.length + i}`);}this.isLoading = false;}, 1000);}},},
};
</script><style>
#app {height: 500px;overflow: auto;
}
</style>

在 Vue 示例中:
定义了一个组件,其中包含数据items用于展示列表项,bufferSize表示缓冲区大小,isLoading用于标识是否正在加载数据。
在模板中使用v-for循环渲染items数据。
通过@scroll监听滚动事件,在事件处理函数handleScroll中进行滚动距离的计算和判断。
当满足条件时,设置isLoading为true,模拟异步加载数据(使用setTimeout),加载完成后更新items数据并将isLoading设为false。

React 实现

import React, { useState, useEffect, useRef } from'react';function App() {const [items, setItems] = useState([]);const [isLoading, setIsLoading] = useState(false);const bufferSize = 100;const containerRef = useRef(null);useEffect(() => {// 监听滚动事件const container = containerRef.current;container.addEventListener('scroll', handleScroll);// 组件卸载时移除滚动事件监听return () => {container.removeEventListener('scroll', handleScroll);};}, []);const handleScroll = (event) => {const scrollElement = event.target;const scrollTop = scrollElement.scrollTop;const scrollHeight = scrollElement.scrollHeight;const clientHeight = scrollElement.clientHeight;const distanceToBottom = scrollHeight - (scrollTop + clientHeight);if (distanceToBottom < bufferSize &&!isLoading) {setIsLoading(true);// 模拟加载更多数据setTimeout(() => {const newItems = [];for (let i = 0; i < 10; i++) {newItems.push(`新数据 ${items.length + i}`);}setItems([...items,...newItems]);setIsLoading(false);}, 1000);}};return (<div ref={containerRef} style={{ height: '500px', overflow: 'auto' }}>{items.map((item, index) => (<div key={index}>{item}</div>))}</div>);
}export default App;

在 React 示例中:
使用useState钩子定义状态items和isLoading。
使用useRef钩子获取滚动容器的引用。
通过useEffect钩子在组件挂载时添加滚动事件监听,组件卸载时移除监听。
在handleScroll函数中进行滚动距离的计算和加载判断。
当满足条件时,设置isLoading为true,模拟加载数据后更新items状态并将isLoading设为false。

以上就是文章全部内容了,如果喜欢这篇文章的话,还希望三连支持一下,感谢!

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

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

相关文章

dom4j 操作 xml 之按照顺序插入标签

最近学了一下 dom4j 操作 xml 文件&#xff0c;特此记录一下。 public class Dom4jNullTagFiller {public static void main(String[] args) throws DocumentException {SAXReader reader new SAXReader();//加载 xml 文件Document document reader.read("C:\\Users\\24…

基于jeecgboot-vue3的Flowable流程支持bpmn流程设计器与仿钉钉流程设计器-编辑多版本处理

因为这个项目license问题无法开源&#xff0c;更多技术支持与服务请加入我的知识星球。 1、前端编辑带有仿钉钉流程的处理 /** 编辑流程设计弹窗页面 */const handleLoadXml (row) > {console.log("handleLoadXml row",row)const params {flowKey: row.key,ver…

搜集日志。

logstash 负责&#xff1a; 接收数据 input — 解析过滤并转换数据 filter(此插件可选) — 输出数据 output input — decode — filter — encode — output elasticsearch 查询和保存数据 Elasticsearch 去中心化集群 Data node 消耗大量 CPU、内存和 I/O 资源 分担一部分…

四、GD32 MCU 常见外设介绍

系统架构 1.RCU 时钟介绍 众所周知&#xff0c;时钟是MCU能正常运行的基本条件&#xff0c;就好比心跳或脉搏&#xff0c;为所有的工作单元提供时间 基数。时钟控制单元提供了一系列频率的时钟功能&#xff0c;包括多个内部RC振荡器时钟(IRC)、一个外部 高速晶体振荡器时钟(H…

Docker修改Postgresql密码

在Docker环境中&#xff0c;对已运行的PostgreSQL数据库实例进行密码更改是一项常见的维护操作。下面将详述如何通过一系列命令行操作来实现这一目标。 修改方式 查看容器状态及信息 我们需要定位到正在运行的PostgreSQL容器以获取其相关信息。执行以下命令列出所有正在运行…

Mongodb多键索引中索引边界的混合

学习mongodb&#xff0c;体会mongodb的每一个使用细节&#xff0c;欢迎阅读威赞的文章。这是威赞发布的第93篇mongodb技术文章&#xff0c;欢迎浏览本专栏威赞发布的其他文章。如果您认为我的文章对您有帮助或者解决您的问题&#xff0c;欢迎在文章下面点个赞&#xff0c;或者关…

安全防御---防火墙双击热备与带宽管理

目录 一、实验拓扑 二、实验需求 三、实验的大致思路 四、实验过程 4、基础配置 4.1 FW4的接口信息 4.2 新建办公&#xff0c;生产&#xff0c;游客&#xff0c;电信&#xff0c;移动安全区域 4.3 接口的网络配置 生产区:10.0.1.2/24 办公区:10.0.2.2/24 4.4 FW4的…

极地生产力自主采样系统的观测:融池比例统计 MEDEA 融池比例数据集

Observations from the Autonomous Polar Productivity Sampling System. 极地生产力自主采样系统的观测结果 简介 该项目是美国国家航空航天局 ICESCAPE 大型项目的一部分&#xff0c;旨在研究浮游植物丰度的长期季节性变化与整个生长季节在波弗特海和楚科奇海测量到的海冰…

Spring与设计模式实战之策略模式

Spring与设计模式实战之策略模式 引言 在现代软件开发中&#xff0c;设计模式是解决常见设计问题的有效工具。它们提供了经过验证的解决方案&#xff0c;帮助开发人员构建灵活、可扩展和可维护的系统。本文将探讨策略模式在Spring框架中的应用&#xff0c;并通过实际例子展示…

Linux 驱动开发 举例

Linux驱动开发涉及编写内核模块或设备驱动程序&#xff0c;以便让Linux内核能够识别和控制硬件设备。以下是一个简单的Linux驱动开发示例&#xff0c;这个示例将展示如何创建一个简单的字符设备驱动。 示例&#xff1a;简单的字符设备驱动 1. 定义设备驱动结构 首先&#xf…

深度学习损失计算

文章目录 深度学习损失计算1.如何计算当前epoch的损失&#xff1f;2.为什么要计算样本平均损失&#xff0c;而不是计算批次平均损失&#xff1f; 深度学习损失计算 1.如何计算当前epoch的损失&#xff1f; 深度学习中的损失计算&#xff0c;通常为数据集的平均损失&#xff0…

CREC晶振产品分类

CREC晶振大类有石英晶体谐振器、石英晶体振荡器、石英晶体滤波器 其中石英晶体谐振器&#xff1a; KHZ石英谐振器 车规级32.768KHz石英谐振器 专为汽车RTC应用而设计&#xff0c;通过AECQ-200可靠性测试&#xff0c;满足汽车电子的高标准时频需求&#xff0c;为客户提供可靠…

完整的优化流程需要做什么工作

&#x1f47d;System.out.println(“&#x1f44b;&#x1f3fc;嗨&#xff0c;大家好&#xff0c;我是代码不会敲的小符&#xff0c;目前工作于上海某电商服务公司…”); &#x1f4da;System.out.println(“&#x1f388;如果文章中有错误的地方&#xff0c;恳请大家指正&…

三生随记——空调的诅咒

在一个炎热的夏日&#xff0c;小镇上的居民们都在忍受着高温的煎熬。阳光无情地炙烤着大地&#xff0c;空气仿佛凝固了一般&#xff0c;让人喘不过气来。 杰克和艾米是一对年轻的夫妻&#xff0c;他们刚刚搬进了这座小镇边缘的一座古老房子。这座房子虽然宽敞&#xff0c;但却透…

前后端,数据库以及分布式系统

1. 前端&#xff08;Frontend&#xff09; 定义&#xff1a; 前端是用户直接与之交互的部分&#xff0c;通常在浏览器中运行。它负责呈现和展示数据&#xff0c;与用户进行交互。 关键点&#xff1a; HTML/CSS/JavaScript&#xff1a; HTML定义了页面结构&#xff0c;CSS负责…

Interface中的方法被default修饰

Interface中的方法被default修饰 在Java 8中&#xff0c;引入了default方法的概念&#xff0c;使得接口可以包含具体的方法实现。被default修饰的方法称为默认方法。这意味着接口不仅可以声明方法&#xff0c;还可以提供方法的默认实现。 默认方法的主要作用包括&#xff1a;…

工业网络通信教学平台-工业互联网综合教学的实验平台-工业互联网应用实训

工业互联网&#xff08;Industrial Internet&#xff09;&#xff0c;也称为工业物联网或IIoT&#xff0c;是一个开放的、全球化的工业网络&#xff0c;将人、数据和机器进行连接&#xff0c;将工业、技术和互联网深度融合。 工业互联网产业发展离不开信息技术产业人才&#xf…

Elasticsearch 聚合查询简介

Elasticsearch 聚合查询简介 在 Elasticsearch 中&#xff0c;聚合&#xff08;Aggregations&#xff09;是一种强大的数据分析工具&#xff0c;可以让你从数据中提取有意义的信息。通过聚合查询&#xff0c;可以对数据进行分类、统计、过滤和分组等操作&#xff0c;从而帮助用…

Android TEE SE

在Android平台上&#xff0c;Trusted Execution Environment (TEE) 和 Secure Element (SE) 是用来增强设备安全性的关键技术。TEE提供了隔离的执行环境&#xff0c;可以执行敏感的安全操作&#xff0c;而SE则是一个独立的、高度安全的微控制器&#xff0c;用于存储和处理非常敏…

Log4j的原理及应用详解(五)

本系列文章简介&#xff1a; 在软件开发的广阔领域中&#xff0c;日志记录是一项至关重要的活动。它不仅帮助开发者追踪程序的执行流程&#xff0c;还在问题排查、性能监控以及用户行为分析等方面发挥着不可替代的作用。随着软件系统的日益复杂&#xff0c;对日志管理的需求也日…