当前位置: 首页 > news >正文

前端reactvue3——实现滚动到底加载数据

文章目录

    • ⭐前言
    • ⭐react 实现滚动加载
    • ⭐vue3 实现滚动加载
    • ⭐总结
    • ⭐结束

⭐前言

大家好,我是yma16,本文分享 前端react&vue3——实现滚动加载(到底部加载)
scrollTop 属性

一个双精度浮点值,表示元素当前从原点垂直滚动的像素数,其中正值表示元素向下滚动(以显示更多底部的内容)。如果元素根本没有向上或向下滚动,则 scrollTop 为 0。如果文档不是活动文档,则返回值为 0。如果文档在亚像素精度设备上呈现,则返回的值也是亚像素精度的,可能包含小数部分。

clientHeight 属性

只读属性 Element.clientHeight 对于没有定义 CSS 或者内联布局盒子的元素为 0;否则,它是元素内部的高度(以像素为单位),包含内边距,但不包括边框、外边距和水平滚动条(如果存在)。
clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度(如果存在)来计算。

scrollHeight 属性

scrollHeight 只读属性是一个元素内容高度的度量,包括由于溢出导致的视图中不可见内容

node系列往期文章
node_windows环境变量配置
node_npm发布包
linux_配置node
node_nvm安装配置
node笔记_http服务搭建(渲染html、json)
node笔记_读文件
node笔记_写文件
node笔记_连接mysql实现crud
node笔记_formidable实现前后端联调的文件上传
node笔记_koa框架介绍
node_koa路由
node_生成目录
node_读写excel
node笔记_读取目录的文件
node笔记——调用免费qq的smtp发送html格式邮箱
node实战——搭建带swagger接口文档的后端koa项目(node后端就业储备知识)
node实战——后端koa结合jwt连接mysql实现权限登录(node后端就业储备知识)
node实战——koa给邮件发送验证码并缓存到redis服务(node后端储备知识)

koa系列项目文章
前端vite+vue3结合后端node+koa——实现代码模板展示平台(支持模糊搜索+分页查询)
node+vue3+mysql前后分离开发范式——实现对数据库表的增删改查
node+vue3+mysql前后分离开发范式——实现视频文件上传并渲染

koa-vue性能监控到封装sdk系列文章
性能监控系统搭建——node_koa实现性能监控数据上报(第一章)
性能监控系统搭建——vue3实现性能监控数据展示(第二章)
性能监控计算——封装带性能计算并上报的npm包(第三章)
canvas系列文章
web canvas系列——快速入门上手绘制二维空间点、线、面
webgl canvas系列——快速加背景、抠图、加水印并下载图片
webgl canvas系列——animation中基本旋转、平移、缩放(模拟冒泡排序过程)

⭐react 实现滚动加载

判断滚动到底部:Math.ceil(scrollTop+clientHeight+1)>= scrollHeight
这里+1和向上取整是考虑到scrollTop是浮点数
react demo 案例:

import { useEffect, useRef, useState, useCallback } from 'react';
import {Button,notification} from 'tdesign-react'const ScrollDemo=(props:any,ref:any)=> {// @ts-ignore 列表数据const [listData,setListData]=useState<any>([])// refconst scrollRef=useRef<HTMLElement|any>(null);// 初始化数据const initData=()=>{const data=[];for(let i=1;i<50;++i){data.push({label:`label${i}`,value:`label${i}`,})}return data};// 重置const resetData=()=>{setListData(initData())};//追加数据const appendData=useCallback(()=>{const data=[];const length=listData.lengthfor(let i=length+1;i<10+length;++i){data.push({label:`label${i}`,value:`label${i}`,})}setListData(listData.concat(data))},[listData])//滚动事件const scrollEvent=(e:any)=>{console.log('e',e)// 不使用滚动条的情况下为了适应视口中所用内容所需的最小高度const scrollHeight=e.target.scrollHeight// 从其顶部边缘滚动的像素数const scrollTop=e.target.scrollTop// dom 视口高度(不包含任何滚动条)const clientHeight=e.target.clientHeightconsole.log('scrollTop',scrollTop)console.log('clientHeight',clientHeight)console.log('scrollHeight',scrollHeight)// 向上取整if(Math.ceil(scrollTop+clientHeight+1)>= scrollHeight ){notification.info({title: '到底啦!',})appendData()}}//监听 dom滚动const listenDomScroll=()=>{try{if(scrollRef.current){//@ts-ignorescrollRef.current.removeEventListener('scroll',scrollEvent)scrollRef.current.addEventListener('scroll',scrollEvent)}}catch (e) {console.error(e)}};//  初始化useEffect(()=>{resetData()},[])// 数据变化重新监听domuseEffect(()=>{if(scrollRef.current){listenDomScroll()}},[scrollRef,listData])return <div style={{padding:'10px',textAlign:'left'}}>
<Button onClick={resetData} style={{margin:'10px'}}>重置
</Button><div><div style={{maxHeight:'300px',width:'200px',overflowY:'auto',}} ref={scrollRef}>{listData.map((item:any)=>{return <div key={item.value} style={{background:'#0052d9',color:'#fff',margin:'2px',padding:'2px'}}>{item.label}</div>})}</div></div></div>
};
export default ScrollDemo

效果:
react-scroll-demo

⭐vue3 实现滚动加载

vue3 demo 实例:

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { notification } from 'ant-design-vue'
const scrollRef = ref()
type ListDataType = { label: string, value: string }
// 初始化数据
const initData = (): ListDataType[] => {const data: ListDataType[] = [];for (let i = 1; i < 50; ++i) {data.push({label: `label${i}`,value: `label${i}`,})}return data
};
// state 
const state: any = reactive({listData: initData()
})// 重置
const resetData = () => {state.listData = initData()
};//追加数据
const appendData = () => {const data: any = [];const length = state.listData.lengthfor (let i = length + 1; i < 10 + length; ++i) {data.push({label: `label${i}`,value: `label${i}`,})}state.listData = [...state.listData, ...data]
}
//滚动事件
const scrollEvent = (e: any) => {console.log('e', e)// 不使用滚动条的情况下为了适应视口中所用内容所需的最小高度const scrollHeight = e.target.scrollHeight// 从其顶部边缘滚动的像素数const scrollTop = e.target.scrollTop// dom 视口高度(不包含任何滚动条)const clientHeight = e.target.clientHeightconsole.log('scrollTop', scrollTop)console.log('clientHeight', clientHeight)console.log('scrollHeight', scrollHeight)// 向上取整if (Math.ceil(scrollTop + clientHeight + 1) >= scrollHeight) {notification.open({message: '到底啦!',})appendData()}
}
//监听 dom滚动
const listenDomScroll = () => {try {if (scrollRef.value) {//@ts-ignorescrollRef.value.removeEventListener('scroll', scrollEvent)scrollRef.value.addEventListener('scroll', scrollEvent)}}catch (e) {console.error(e)}
};// 初始化页面
onMounted(() => {listenDomScroll()
})</script>
<template><div><a-button type="primary" @click="resetData">重置</a-button><div style="max-height:300px;overflow-y:auto;width:200px" ref="scrollRef"><div v-for="item in state.listData" :key="item.value"style="background:#0052d9;color:#fff;padding:2px;margin:2px;">{{ item.label }}</div></div></div>
</template>

效果:
vue-scroll-demo
代码块inscode

⭐总结

底部加载的关键判断条件是:Math.ceil(scrollTop + clientHeight + 1) >= scrollHeight。

在使用react时,需要注意通过dom监听数据的变化。而在使用vue3时,数据具有响应式特性,因此只需在滚动加载时添加数据即可。

⭐结束

本文分享到这结束,如有错误或者不足之处欢迎指出!
在这里插入图片描述

👍 点赞,是我创作的动力!

⭐️ 收藏,是我努力的方向!

✏️ 评论,是我进步的财富!

💖 最后,感谢你的阅读!

相关文章:

前端reactvue3——实现滚动到底加载数据

文章目录 ⭐前言⭐react 实现滚动加载⭐vue3 实现滚动加载⭐总结⭐结束 ⭐前言 大家好&#xff0c;我是yma16&#xff0c;本文分享 前端react&vue3——实现滚动加载&#xff08;到底部加载&#xff09; scrollTop 属性 一个双精度浮点值&#xff0c;表示元素当前从原点垂直…...

qt 安装提示 无法定位程序输入点 systemparametersinfofordpi于动态链接库

安装 qt-creator-opensource-windows-x86_64-14.0.2.exe 有以下提示 无法定位程序输入点 systemparametersinfofordpi于动态链接库 路径 qt-creator-opensource-windows-x86_64-14.0.2.exe 更新系统 平台win10 很久之前的版本&#xff0c;关闭了更新&#xff0c;更新到 Win…...

算法笔记day04

目录 1. 在字符串中找出连续最长的数字串 2.岛屿数量 3.拼三角 1. 在字符串中找出连续最长的数字串 字符串中找出连续最长的数字串_牛客题霸_牛客网 (nowcoder.com) 算法思路&#xff1a; 这是一道简单的双指针题目&#xff0c;首先用i遍历数组&#xff0c;当遍历到数字的时…...

实战篇:(四)Vue2 + Three.js 创建可交互的360度全景视图,可控制旋转、缩放完整代码

Vue2 Three.js 创建可交互的360度全景视图&#xff0c;可控制旋转、缩放 引言 在现代网页开发中&#xff0c;三维图形技术已经成为提升用户体验的重要工具。本文将展示如何使用 Three.js 创建一个简单的可交互360度全景视图。通过这一项目&#xff0c;你将能够学习到基本的场…...

【load_file读文件】

一、文件操作基础 show 先试试 show variables;发现显示了三百多行的系统变量: 这是数据库的目录&#xff1a; mysql有多种编码方式&#xff0c;有数据库编码、连接时的编码、还有客户端的编码&#xff1a; 这里还有一个日志路径&#xff0c;这个日志是需要手动打开的&#…...

JavaScript object(2)

这样的话&#xff0c;就变成只读了。...

Acwing 排序

1.快速排序 主要思想&#xff1a;基于分治思想。通过选择一个基准元素&#xff0c;将数组分为两部分&#xff0c;左边部分元素都小于等于基准&#xff0c;右边部分元素都大于等于基准。然后对这两部分分别递归地进行排序。 分区逻辑&#xff1a;双指针算法 左指针i从左往右找…...

分布式环境下验证码登录的技术实现

分布式环境下验证码登录的技术实现 在分布式系统中&#xff0c;实现验证码登录是一个复杂但至关重要的任务。它不仅能防止暴力破解和自动化攻击&#xff0c;还能提高系统的安全性和用户体验。本文将详细介绍在分布式环境下如何实现验证码登录&#xff0c;涵盖验证码的生成、存…...

数据结构-5.9.树的存储结构

一.树的逻辑结构&#xff1a; 二.双亲表示法(顺序存储)&#xff1a; 1.树中除了根结点外每一颗树中的任意一个结点都只有一个父结点(双亲结点)&#xff1b; 2.结点包括结点数据和指针&#xff1b; 3.上述图片中右边的顺序存储解析&#xff1a;比如A结点左边的0&#xff0c;就…...

【Linux】解锁线程基本概念和线程控制,步入多线程学习的大门

目录 1、线程初识 1.1线程的概念 1.2.关于线程和进程的进一步理解 1.3.线程的设计理念 1.4.进程vs线程&#xff08;图解&#xff09; 1.5地址空间的第四谈 2.线程的控制&#xff1a; 2.1.关于线程控制的前置知识 2.2创建线程的系统调用&#xff1a; 这个几号手册具体…...

uniapp学习(005-2 详解Part.2)

零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战&#xff0c;开发打包微信小程序、抖音小程序、H5、安卓APP客户端等 总时长 23:40:00 共116P 此文章包含第41p-第p47的内容 文章目录 mainifest.json文件配置获取微信小程序appid注册微信小程序微信小程序控制台图形界…...

深度学习的关键概念和术语

特征 特征是图像上可进行视觉辨识的区域。特征通常代表对应用相关的内容&#xff08;缺陷、对象、对象的特定部分&#xff09;。 特征尺寸 仅用于聚焦模式下的绿色分类、红色、蓝色定位和蓝色读取工具。 您认为对分析图像内容最重要的图像特征的主观大小。该特征尺寸确定用于…...

navicate可视化数据库操作-cnblog

1 连接数据库 点击链接&#xff0c;自定义名称&#xff0c;输入root密码 2 准备按照图例创建数据库demo 3 新建数据库...

kubernetes中的微服务

目录 一 什么是微服务 二 微服务的类型 三 ipvs模式 3.1 ipvs模式配置方式 四 微服务类型详解 4.1 clusterip 4.2 ClusterIP中的特殊模式headless 4.3 nodeport 4.4 loadbalancer 4.5 metalLB 4.6 externalname 五 Ingress-nginx 5.1 ingress-nginx功能 5.2 部署…...

Python 量子机器学习及其应用

Python 量子机器学习及其应用 目录 &#x1f300; 量子机器学习的基础概念&#x1f4a1; 量子计算的原理与经典计算的区别&#x1f511; 量子算法在机器学习中的应用潜力⚛️ 量子计算与经典机器学习算法的结合&#x1f680; 案例展示&#xff1a;量子算法提升机器学习效率&a…...

echarts显示隐藏柱状图柱子的背景色

showBackground: true, //控制是否显示背景色backgroundStyle: {// color: rgba(180, 180, 180, 0.4) //背景色的颜色color: red} 关键代码是 showBackground: true, //控制是否显示背景色 设置为false或者直接而不写就是不显示背景色&#xff0c;默认是不显示背景色 true的时…...

QT文件操作【记事本】

mainwindow.h核心函数 QFileDialog::getOpenFileName()QFileDialog::getSaveFileName() #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow> #include<QFileDialog> #include<QMessageBox> #include<QDebug> #include<QFile> #…...

Linux 定时备份系统日志

Linux 定时备份系统日志 SSH跨机免密登录复制备份到另一台虚机上开启定时任务 SSH跨机免密登录 定时备份首先要实现免登入 一、scp 一个文件从其他服务器到本机&#xff0c;怎么跳过ssh登录验证呢&#xff1f; 要在使用SCP时跳过密码登录&#xff0c;你可以设置SSH密钥认证。首…...

音视频入门基础:FLV专题(15)——Video Tag简介

一、引言 根据《video_file_format_spec_v10_1.pdf》第75页&#xff0c;如果某个Tag的Tag header中的TagType值为9&#xff0c;表示该Tag为Video Tag&#xff1a; 这时StreamID之后紧接着的就是VideoTagHeader&#xff0c;也就是说这时Tag header之后的就是VideoTagHeader&…...

尚硅谷rabbitmq2024 第15-18节 springboot整合与可靠性答疑

在spring boot项目中&#xff0c;只引入了一个amqp的starter&#xff0c;为什么在写listener的时候能看到rabbitmq相关的类&#xff0c;比如RabbitListener( public void processMessage(String dataString, Message message, channel channel){ 这里的Message就是rabbitmq下面…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...

Python+ZeroMQ实战:智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...

c++第七天 继承与派生2

这一篇文章主要内容是 派生类构造函数与析构函数 在派生类中重写基类成员 以及多继承 第一部分&#xff1a;派生类构造函数与析构函数 当创建一个派生类对象时&#xff0c;基类成员是如何初始化的&#xff1f; 1.当派生类对象创建的时候&#xff0c;基类成员的初始化顺序 …...

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...