当前位置: 首页 > 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下面…...

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)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ 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&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;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&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

【C++进阶篇】智能指针

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

Ubuntu系统复制(U盘-电脑硬盘)

所需环境 电脑自带硬盘&#xff1a;1块 (1T) U盘1&#xff1a;Ubuntu系统引导盘&#xff08;用于“U盘2”复制到“电脑自带硬盘”&#xff09; U盘2&#xff1a;Ubuntu系统盘&#xff08;1T&#xff0c;用于被复制&#xff09; &#xff01;&#xff01;&#xff01;建议“电脑…...

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…...