前端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
效果:
⭐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>
效果:
代码块inscode
⭐总结
底部加载的关键判断条件是:Math.ceil(scrollTop + clientHeight + 1) >= scrollHeight。
在使用react时,需要注意通过dom监听数据的变化。而在使用vue3时,数据具有响应式特性,因此只需在滚动加载时添加数据即可。
⭐结束
本文分享到这结束,如有错误或者不足之处欢迎指出!
👍 点赞,是我创作的动力!
⭐️ 收藏,是我努力的方向!
✏️ 评论,是我进步的财富!
💖 最后,感谢你的阅读!
相关文章:

前端reactvue3——实现滚动到底加载数据
文章目录 ⭐前言⭐react 实现滚动加载⭐vue3 实现滚动加载⭐总结⭐结束 ⭐前言 大家好,我是yma16,本文分享 前端react&vue3——实现滚动加载(到底部加载) scrollTop 属性 一个双精度浮点值,表示元素当前从原点垂直…...
qt 安装提示 无法定位程序输入点 systemparametersinfofordpi于动态链接库
安装 qt-creator-opensource-windows-x86_64-14.0.2.exe 有以下提示 无法定位程序输入点 systemparametersinfofordpi于动态链接库 路径 qt-creator-opensource-windows-x86_64-14.0.2.exe 更新系统 平台win10 很久之前的版本,关闭了更新,更新到 Win…...

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

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

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

JavaScript object(2)
这样的话,就变成只读了。...

Acwing 排序
1.快速排序 主要思想:基于分治思想。通过选择一个基准元素,将数组分为两部分,左边部分元素都小于等于基准,右边部分元素都大于等于基准。然后对这两部分分别递归地进行排序。 分区逻辑:双指针算法 左指针i从左往右找…...
分布式环境下验证码登录的技术实现
分布式环境下验证码登录的技术实现 在分布式系统中,实现验证码登录是一个复杂但至关重要的任务。它不仅能防止暴力破解和自动化攻击,还能提高系统的安全性和用户体验。本文将详细介绍在分布式环境下如何实现验证码登录,涵盖验证码的生成、存…...

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

【Linux】解锁线程基本概念和线程控制,步入多线程学习的大门
目录 1、线程初识 1.1线程的概念 1.2.关于线程和进程的进一步理解 1.3.线程的设计理念 1.4.进程vs线程(图解) 1.5地址空间的第四谈 2.线程的控制: 2.1.关于线程控制的前置知识 2.2创建线程的系统调用: 这个几号手册具体…...

uniapp学习(005-2 详解Part.2)
零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战,开发打包微信小程序、抖音小程序、H5、安卓APP客户端等 总时长 23:40:00 共116P 此文章包含第41p-第p47的内容 文章目录 mainifest.json文件配置获取微信小程序appid注册微信小程序微信小程序控制台图形界…...
深度学习的关键概念和术语
特征 特征是图像上可进行视觉辨识的区域。特征通常代表对应用相关的内容(缺陷、对象、对象的特定部分)。 特征尺寸 仅用于聚焦模式下的绿色分类、红色、蓝色定位和蓝色读取工具。 您认为对分析图像内容最重要的图像特征的主观大小。该特征尺寸确定用于…...

navicate可视化数据库操作-cnblog
1 连接数据库 点击链接,自定义名称,输入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 量子机器学习及其应用 目录 🌀 量子机器学习的基础概念💡 量子计算的原理与经典计算的区别🔑 量子算法在机器学习中的应用潜力⚛️ 量子计算与经典机器学习算法的结合🚀 案例展示:量子算法提升机器学习效率&a…...

echarts显示隐藏柱状图柱子的背景色
showBackground: true, //控制是否显示背景色backgroundStyle: {// color: rgba(180, 180, 180, 0.4) //背景色的颜色color: red} 关键代码是 showBackground: true, //控制是否显示背景色 设置为false或者直接而不写就是不显示背景色,默认是不显示背景色 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 一个文件从其他服务器到本机,怎么跳过ssh登录验证呢? 要在使用SCP时跳过密码登录,你可以设置SSH密钥认证。首…...

音视频入门基础:FLV专题(15)——Video Tag简介
一、引言 根据《video_file_format_spec_v10_1.pdf》第75页,如果某个Tag的Tag header中的TagType值为9,表示该Tag为Video Tag: 这时StreamID之后紧接着的就是VideoTagHeader,也就是说这时Tag header之后的就是VideoTagHeader&…...
尚硅谷rabbitmq2024 第15-18节 springboot整合与可靠性答疑
在spring boot项目中,只引入了一个amqp的starter,为什么在写listener的时候能看到rabbitmq相关的类,比如RabbitListener( public void processMessage(String dataString, Message message, channel channel){ 这里的Message就是rabbitmq下面…...

css实现圆环展示百分比,根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
【位运算】消失的两个数字(hard)
消失的两个数字(hard) 题⽬描述:解法(位运算):Java 算法代码:更简便代码 题⽬链接:⾯试题 17.19. 消失的两个数字 题⽬描述: 给定⼀个数组,包含从 1 到 N 所有…...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet,点击确认后如下提示 最终上报fail 解决方法 内核升级导致,需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile,新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年,作为行业领先的3D工业相机及视觉系统供应商,累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成,通过稳定、易用、高回报的AI3D视觉系统,为汽车、新能源、金属制造等行…...

【Oracle】分区表
个人主页:Guiat 归属专栏:Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...
Python 包管理器 uv 介绍
Python 包管理器 uv 全面介绍 uv 是由 Astral(热门工具 Ruff 的开发者)推出的下一代高性能 Python 包管理器和构建工具,用 Rust 编写。它旨在解决传统工具(如 pip、virtualenv、pip-tools)的性能瓶颈,同时…...

【C++进阶篇】智能指针
C内存管理终极指南:智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

Ubuntu系统复制(U盘-电脑硬盘)
所需环境 电脑自带硬盘:1块 (1T) U盘1:Ubuntu系统引导盘(用于“U盘2”复制到“电脑自带硬盘”) U盘2:Ubuntu系统盘(1T,用于被复制) !!!建议“电脑…...
Vue3中的computer和watch
computed的写法 在页面中 <div>{{ calcNumber }}</div>script中 写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...