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

⭐前言

大家好，我是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时，数据具有响应式特性，因此只需在滚动加载时添加数据即可。

⭐结束

本文分享到这结束，如有错误或者不足之处欢迎指出！

👍 点赞，是我创作的动力！

⭐️ 收藏，是我努力的方向！

✏️ 评论，是我进步的财富！

💖 最后，感谢你的阅读！