Vue3实现滚动到容器底部时发送请求,加载新数据

问题来源

在项目中出现了需要在容器滚动到底部时,加载新的数据的需求,以下是解决的方案笔记

解决

画了个流程图:

如图,先添加一个动态加载的图标,还有全部数据载完的《到底啦...》

大概这么个样子,之后呢,我们需要用到@scroll方法和ref获取这个元素的scrollHeight 和scrollTop来机型判断加不加载数据,再使用上面说到的节流操作,就成功实现啦..代码如下,需要根据业务对应的请求...


// 节流, 是在重复的事件请求中,只执行一次// eslint-disable-next-line @typescript-eslint/ban-types
export const throttle = (fn: any, delay: number): Function => {let throttleTimer: NodeJS.Timeout | null;return (...args: unknown[]) => {if (throttleTimer) {return;}throttleTimer = setTimeout(() => {fn.apply(this, args);throttleTimer = null;}, delay);};
};let loadMoreThrottle = throttle(loadMore, 500);const getData = () => {//获取新的数据const container: any = messageContainer.value;// 如果到底了,并且数据还未加载完if (container.scrollTop + container.clientHeight >= container.scrollHeight &&!down.value) {console.log("到底了");loading.value = true;loadMoreThrottle();}
};const loadMore = async () => {// 如果已经加载完了,无需加载新数据if (down.value) {return;}// 加载需要房前页数+1current.value++;// 根据业务设置请求参数啥的const commentQuery = {questionId: props.questionId,current: current.value,pageSize: 10,} as CommentQueryRequest;const res = await CommentControllerService.listCommentByPageUsingPost(commentQuery);if (res.code === 0) {//载入新数据allmessages.value.push(...(res.data.records));if (res.data.pages === res.data.current) {down.value = true;}} else {message.error("请求失败:" + res.message);}// 最后把加载中设置为falseloading.value = false;
};

 同理,也可以用监听去做。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/195500.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PMP备考必看|浅谈PMP证书的价值,PMP考试详细全流程

作为已经在项目管理领域摸爬滚打五年的资深项目经理,我可以诚实的告诉大家,在项目管理领域拥有丰富项目管理经验的人都知道,很多公司在发布招聘信息时都会要求申请者持有PMP证书,这些证书在项目经理岗位的要求中经常出现。 在实际…

【PyTorch】softmax回归

文章目录 1. 模型与代码实现1.1. 模型1.2. 代码实现 2. Q&A 1. 模型与代码实现 1.1. 模型 背景 在分类问题中,模型的输出层是全连接层,每个类别对应一个输出。我们希望模型的输出 y ^ j \hat{y}_j y^​j​可以视为属于类 j j j的概率,然…

阿里云ACE认证含金量有多高?2023年海南E类人才认证政策告诉你答案!

2023年海南省高层次人才享受什么待遇?海南高层次人才住房补贴多少钱?海南高层次E类人才待遇有哪些?什么是海南高层次E类人才?E类人才怎么申请?这篇文章给大家详细介绍一下。 1.E类人才在海南有什么好处? …

ArcGIS提示当前许可不支持影像服务器

1、问题&#xff1a; 在用ArcGIS上处理影像栅格数据时&#xff08;比如栅格数据集裁剪、镶嵌数据集构建镶嵌线等&#xff09;经常会出现。 无法启动配置 RasterComander.ImageServer <详信息 在计算机XXXXX上创建服务器对象实例失败 当前许可不支持影像服务器。 ArcGIS提示当…

Python的模块与库,及if __name__ == ‘__main__语句【侯小啾Python基础领航计划 系列(二十四)】

Python的模块与库,及if name == ‘__main__语句【侯小啾Python基础领航计划 系列(二十四)】 大家好,我是博主侯小啾, 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔…

轻量级网络结构的目标检测算法——Yolov8介绍

1. Yolov8算法概述 Yolov8是一种目标检测算法&#xff0c;它通过独特的双路径预测和紧密的连接的卷积网络进行目标检测。该算法采用了轻量级网络结构&#xff0c;同时保持了较高的性能&#xff0c;因此具有高效的特点。此外&#xff0c;Yolov8还采用了级联和金字塔…

MYSQL练题笔记-聚合函数-各赛事的用户注册率

一、题目相关内容 1&#xff09;相关的表 2&#xff09;题目 3&#xff09;帮助理解题目的示例&#xff0c;提供返回结果的格式 二、自己初步的理解 有两张不同左右的表&#xff0c;用户表和赛事注册表。然后解题。 1.各种赛事的用户注册百分率 各种赛事的意味着通过contes…

synchronized底层原理(一)

文章目录 1. 问题引入2. 相关概念3. Synchronized使用4. Synchronized底层原理1. 简介2. Monitor&#xff08;管程/监视器&#xff09;3. Java语言的内置管程synchronized4. Java对象的内存布局5. 如何使用MarkWord记录锁状态6. 偏向锁7. 轻量级锁 1. 问题引入 假设我们有1000…

手把手教你写一个Shell脚本部署你的服务

我们都知道&#xff0c;在开发的过程中&#xff0c;有很多部署自己微服务的方式&#xff0c;其中有各种各样的不同操作&#xff0c;比如使用 docker 打包为镜像的方式&#xff0c;还有基础使用 jar 包的方式进行部署&#xff0c;但是呢&#xff1f;使用 jar 包部署&#xff0c;…

XIAO ESP32S3之AI教程

一、sipeed AI教程 AI 指南 - Sipeed Wiki 二、TinyMX TinyMaix是国内sipeed团队面向单片机的超轻量级的神经网络推理库&#xff0c;即TinyML推理库&#xff0c;可以让你在任意单片机上运行轻量级深度学习模型。 英文:https://github.com/sipeed/TinyMaix 中文:https://gi…

Spring cloud - gateway

什么是Spring Cloud Gateway 先去看下官网的解释&#xff1a; This project provides an API Gateway built on top of the Spring Ecosystem, including: Spring 6, Spring Boot 3 and Project Reactor. Spring Cloud Gateway aims to provide a simple, yet effective way t…

Git:分布式版本控制系统的崛起与演变

简介 Git是一个开源的分布式版本控制系统&#xff0c;旨在有效、高速地处理从很小到非常大的项目版本管理。它是由Linus Torvalds于2005年创建的&#xff0c;最初是为了服务于Linux内核开发的版本控制需求。Git通过强大的分支功能、高效的缓存机制以及可扩展的架构设计&#xf…

Golang 并发 — 流水线

并发模式 我们可以将流水线理解为一组由通道连接并由 goroutine 处理的阶段。每个阶段都被定义为执行特定的任务&#xff0c;并按顺序执行&#xff0c;下一个阶段在前一个阶段完成后开始执行。 流水线的另一个重要特性是&#xff0c;除了连接在一起&#xff0c;每个阶段都使用…

大量 SVG 图标在 React 中的极速集成与应用

1. 背景 在一些业务场景中&#xff0c;可能需要使用一些业务上自定义的图标&#xff0c;而这些业务图标消费起来需要很多重复的流程和样板代码&#xff0c;用多了很繁琐。 大致流程&#xff1a; Sketch svg 导出 ➡️ 压缩 svg ➡️ 纯色图标 currentColor 覆写 ➡️ 上传 s…

拼多多商品价格监控自动化API接口获取拼多多商品详情数据API接口

随着电子商务的飞速发展&#xff0c;越来越多的人选择在网上购物。在这个充满竞争的市场中&#xff0c;拼多多以其独特的商业模式和创新的营销手段&#xff0c;迅速崛起成为中国领先的电商平台之一。为了更好地满足消费者的需求&#xff0c;拼多多提供了丰富的API接口&#xff…

JavaScript的创建对象时的语法糖

js中创建一个自定义对象有两种方法&#xff0c;一种是使用new&#xff0c;另一种是使用对象字面量形式&#xff08;即直接构建&#xff0c;关于字面量详见https://blog.csdn.net/bigcarp/article/details/134777091&#xff09; 使用对象字面量定义对象时&#xff0c;若对象的…

统信UOS_麒麟KYLINOS配置apt及git内网代理

原文链接&#xff1a;统信UOS/麒麟KYLINOS上配置APT和GIT内网代理 **hello&#xff0c;大家好啊&#xff01;**在企业环境中&#xff0c;出于安全和管理的考虑&#xff0c;很多公司会设置内网代理服务器&#xff0c;以控制和监管内部网络的访问。这就意味着&#xff0c;员工在使…

jsp多站点图书管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 JSP 多站点图书管理系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql5…

git常用命令小记

&#xff08;文章正在持续更新中&#xff09; git init - 在当前目录下初始化一个新的 Git 仓库。 git clone [url] - 克隆远程仓库到本地。 git add [file] - 将文件添加到暂存区。 git commit -m "commit message" - 将添加到暂存区的文件提交到本地仓库。 git pus…

STM32 Nucleo-64 boards 外设资源引脚对应关系图

STM32 Nucleo-64 boards 外设资源引脚对应关系图 1. STM32 NUCLEO-F103RB1.1 串口对应关系图1.2 I2C对应关系图 【参考博文】 1. STM32 NUCLEO-F103RB 1.1 串口对应关系图 1.2 I2C对应关系图 注意&#xff1a;STM32 NUCLEO-F103RB 在Arduino 端子分配的 I2C 重映射为 PB8 PB9 …