可以进不良网站的浏览器,青岛seo,一站式营销平台,wordpress liuweili文章目录 ⭐前言⭐react 实现滚动加载⭐vue3 实现滚动加载⭐总结⭐结束 ⭐前言
大家好#xff0c;我是yma16#xff0c;本文分享 前端reactvue3——实现滚动加载#xff08;到底部加载#xff09; scrollTop 属性 一个双精度浮点值#xff0c;表示元素当前从原点垂直… 文章目录 ⭐前言⭐react 实现滚动加载⭐vue3 实现滚动加载⭐总结⭐结束 ⭐前言
大家好我是yma16本文分享 前端reactvue3——实现滚动加载到底部加载 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系列项目文章 前端vitevue3结合后端nodekoa——实现代码模板展示平台支持模糊搜索分页查询 nodevue3mysql前后分离开发范式——实现对数据库表的增删改查 nodevue3mysql前后分离开发范式——实现视频文件上传并渲染
koa-vue性能监控到封装sdk系列文章 性能监控系统搭建——node_koa实现性能监控数据上报第一章 性能监控系统搭建——vue3实现性能监控数据展示第二章 性能监控计算——封装带性能计算并上报的npm包第三章 canvas系列文章 web canvas系列——快速入门上手绘制二维空间点、线、面 webgl canvas系列——快速加背景、抠图、加水印并下载图片 webgl canvas系列——animation中基本旋转、平移、缩放模拟冒泡排序过程
⭐react 实现滚动加载
判断滚动到底部Math.ceil(scrollTopclientHeight1) scrollHeight 这里1和向上取整是考虑到scrollTop是浮点数 react demo 案例
import { useEffect, useRef, useState, useCallback } from react;
import {Button,notification} from tdesign-reactconst ScrollDemo(props:any,ref:any) {// ts-ignore 列表数据const [listData,setListData]useStateany([])// refconst scrollRefuseRefHTMLElement|any(null);// 初始化数据const initData(){const data[];for(let i1;i50;i){data.push({label:label${i},value:label${i},})}return data};// 重置const resetData(){setListData(initData())};//追加数据const appendDatauseCallback((){const data[];const lengthlistData.lengthfor(let ilength1;i10length;i){data.push({label:label${i},value:label${i},})}setListData(listData.concat(data))},[listData])//滚动事件const scrollEvent(e:any){console.log(e,e)// 不使用滚动条的情况下为了适应视口中所用内容所需的最小高度const scrollHeighte.target.scrollHeight// 从其顶部边缘滚动的像素数const scrollTope.target.scrollTop// dom 视口高度不包含任何滚动条const clientHeighte.target.clientHeightconsole.log(scrollTop,scrollTop)console.log(clientHeight,clientHeight)console.log(scrollHeight,scrollHeight)// 向上取整if(Math.ceil(scrollTopclientHeight1) 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}}重置
/Buttondivdiv 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 langts
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
templatediva-button typeprimary clickresetData重置/a-buttondiv stylemax-height:300px;overflow-y:auto;width:200px refscrollRefdiv v-foritem in state.listData :keyitem.valuestylebackground:#0052d9;color:#fff;padding:2px;margin:2px;{{ item.label }}/div/div/div
/template效果 代码块inscode ⭐总结
底部加载的关键判断条件是Math.ceil(scrollTop clientHeight 1) scrollHeight。
在使用react时需要注意通过dom监听数据的变化。而在使用vue3时数据具有响应式特性因此只需在滚动加载时添加数据即可。
⭐结束
本文分享到这结束如有错误或者不足之处欢迎指出 点赞是我创作的动力 ⭐️ 收藏是我努力的方向 ✏️ 评论是我进步的财富 最后感谢你的阅读
