vue实现滚动条滑动到底部分页调取后端接口加载数据
一、案例效果
二、前提条件
接口返回数据
三、案例代码
子组件
const $emit = defineEmits(['cloneItem', 'updateList']);const props = defineProps({rightList: {type: Array,},chartTableData: {type: Array as () => ChartListType[],},deleteChartInfo: {type: Object,},chartPageInfo: {type: Object,},
});const isLoading = ref(false);
const cardList = ref<any>([]);
const page = ref(1);
const chartPageDetail = ref<any>({});const hasMoreData = ref(true); // 添加标志位const loadMoreData = async () => {if (isLoading.value) return;isLoading.value = true;// 模拟异步加载数据setTimeout(async () => {page.value++;await $emit('updateList', { pageNum: page.value, pageSize: 10 });if (page.value >= chartPageDetail.value.totalPage) {hasMoreData.value = false; // 更新标志位isLoading.value = false;return;}isLoading.value = false;// 确保滚动条与底部保持一定距离const drawerContent = document.querySelector('.drawer-content');if (drawerContent) {drawerContent.scrollTop = drawerContent.scrollHeight - drawerContent.clientHeight - 100;}}, 1000);
};const handleScroll = () => {const drawerContent = document.querySelector('.drawer-content');if (drawerContent) {const { scrollTop, scrollHeight, clientHeight } = drawerContent;if (scrollTop + clientHeight >= scrollHeight - 50 && !isLoading.value && hasMoreData.value) {loadMoreData();}}
};onMounted(() => {const drawerContent = document.querySelector('.drawer-content');if (drawerContent) {drawerContent.addEventListener('scroll', handleScroll);}
});onBeforeUnmount(() => {const drawerContent = document.querySelector('.drawer-content');if (drawerContent) {drawerContent.removeEventListener('scroll', handleScroll);}
});watch(() => props.chartTableData,() => {const tableData = JSON.parse(JSON.stringify(props.chartTableData));cardList.value = [...cardList.value, ...tableData];console.log('76-- cardList.value', cardList.value);},{ immediate: true, deep: true },
);watch(() => props.chartPageInfo,() => {if (props.chartPageInfo) {chartPageDetail.value = { ...props.chartPageInfo };}},{ immediate: true, deep: true },
);
父组件
<DrawerContent:rightList="rightList":chartTableData="chartTableData":chartPageInfo="chartPageInfo":deleteChartInfo="deleteChartInfo"@updateList="updateChartList"/>const chartPageInfo = ref({});/*** 查询图表列表*/
const getChartList = async (paramsVal?: { pageNum: number; pageSize: number }) => {const params = paramsVal? { ...paramsVal }: {pageNum: 1,pageSize: 10,};const res = await net.strategyManageApi.getChartListApi({ ...params });if (res.data.code === 0) {chartTableData.value = res.data?.data?.data || [];console.log('151---chartTableData', chartTableData.value, '151----rightList', rightList.value);chartTableData.value = formatChartTableData(chartTableData.value, rightList.value);chartPageInfo.value = {pageSize: res.data?.data.pageSize,totalNum: res.data?.data.totalNum,totalPage: res.data?.data.totalPage,};}
};const updateChartList = async (params: { pageNum: number; pageSize: number }) => {await getChartList(params);
};/*** 格式化左侧图表列表-添加isAdd属性* @param chartTableData: 左侧图表列表* @param rightList: 右侧回显列吧* @returns*/
export const formatChartTableData = (chartTableData: any, rightList: any) => {rightList.forEach((rightItem: any) => {chartTableData.forEach((tableItem: any) => {if (rightItem.id === tableItem.id) {tableItem.isAdd = true;}});});return chartTableData;
};相关文章：
vue实现滚动条滑动到底部分页调取后端接口加载数据
一、案例效果 二、前提条件 接口返回数据 三、案例代码 子组件 const $emit defineEmits([cloneItem, updateList]);const props defineProps({rightList: {type: Array,},chartTableData: {type: Array as () > ChartListType[],},deleteChartInfo: {type: Object,}…...
Vscode连接服务器
在VS Code中连接服务器的主要步骤如下： 1.安装Remote-SSH插件：打开VS Code，进入插件市场搜索“Remote-SSH”并安装。安装完成后，VS Code的侧边栏会出现一个远程资源管理器的图标。 2.配置服务器信息：点击…...
工作中Linux 内核的链表算法的使用
在 Linux 内核中，链表是一个非常重要的数据结构，广泛用于各种场景，如任务调度、设备管理、进程管理等。Linux 内核提供了高效且灵活的链表实现，能够更好地管理系统中的数据和对象。我们将深入浅出地讲解 Linux 内核链表的实现原理、用法，并举例展示如何使用。 1. 链表基本…...
洛谷P1115
最大子段和 - 洛谷 最大子段和 题目描述 给出一个长度为 n的序列a，选出其中连续且非空的一段使得这段和最大。 输入格式 第一行是一个整数，表示序列的长度n。 第二行有n个整数，第i个整数表示序列的第 i个数字 a_i。 输出格式 输出一行…...
USB Type-C一线通扩展屏：多场景应用，重塑高效办公与极致娱乐体验
在追求高效与便捷的时代，启明智显USB Type-C一线通扩展屏方案正以其独特的优势，成为众多职场人士、娱乐爱好者和游戏玩家的首选。这款扩展屏不仅具备卓越的性能和广泛的兼容性，更能在多个应用场景中发挥出其独特的价值。 USB2.0显卡ÿ…...
使用Native AOT发布C# dll 提供给C++调用
Native AOT，即提前本地编译（Ahead-Of-Time Compilation），是一种将托管代码（如 C#）编译为本机可执行文件的技术，无需在运行时进行任何代码生成。 （Native AOT 优缺点截图摘自张善友博…...
Excel中根据某列内容拆分为工作簿
简介：根据A列的内容进行筛选，将筛选出来的数据生成一个新的工作簿(可以放到指定文件夹下)，且工作簿名为筛选内容。 举例： 将上面的内容使用VBA会在当前test1下生成5个工作簿，工作簿名分别为TEST1.xls TEST2.xls TEST3…...
网络安全体系与网络安全模型
4.1 网络安全体系概述 4.1.1 网络安全体系概述 一般面言，网络安全体系是网络安全保障系统的最高层概念抽象，是由各种网络安全单元按照一定的规则组成的，共同实现网络安全的目标。网络安全体系包括法律法规政策文件、安全策略、组织管理、技术…...
彻底理解quadtree四叉树、Octree八叉树 —— 点云的空间划分的标准做法
1.参考文章： （1）https://www.zhihu.com/question/25111128 这里面的第一个回答，有一幅图： 只要理解的四叉树的构建，对于八叉树的构建原理类比方法完全一样：对于二维平面内的随机分布的这些点&…...
Altium Designer脚本工具定制
原理图设计自动化 ➡️Altium原理图检查工具 ➡️元器件参数集导入导出 ➡️原理图符号自动创建 ➡️原理图高级查找 ➡️原理图库文档高级查找 ➡️原理图文档对比 ➡️原理图库文档对比 PCB设计自动化 ➡️各种各样的PCB线圈自动创建 ➡️PCB文档导出成SVG格式文档…...
容器化与容器编排（Containerization and Orchestration）
一、容器化与容器编排介绍 容器化技术（Containerization）是一种轻量级的虚拟化技术，它允许开发者将应用及其所有依赖打包到一个独立的、隔离的容器中。容器比传统虚拟机（VM）更加轻便、高效，可以跨平台部署，并且提供一致的运行环境。而容器编排（Container Orchestratio…...
娱乐API：快速生成藏头诗、藏尾诗和藏中诗
引言 诗歌是中国传统文化的重要组成部分，其中藏头诗、藏尾诗和藏中诗因其独特的形式而备受喜爱。为了满足广大文学爱好者的需求，我们推出了一款娱乐API，支持快速生成藏头诗、藏尾诗和藏中诗。本文将详细介绍该API的功能、使用方法以及如何将…...
基于Python制作一个简易UI界面
基于Python制作一个简易UI界面 目录 基于Python制作一个简易UI界面1 原理简介2 编写程序3 程序测试 1 原理简介 这里用到了Python自带的UI库tkinter。 tkinter 是 Python 的标准 GUI（图形用户界面）库，用于创建和管理图形界面。它提供了一个简…...
【视频】OpenCV：读写视频文件VideoCapture和VideoWriter
1、VideoCapture：获取视频 VideoCapture可以从摄像头或者视频文件（eg：mp4，avi）中获取视频数据。 1.1 打开视频 1）打开摄像头 cv::VideoCapture cap(0); 参数：0表示默认摄像头 2）打开视频文件 cv::VideoCapture cap("video.mp4");3）判断是否打开成功 …...
【Leecode】Leecode刷题之路第62天之不同路径
题目出处 62-不同路径-题目出处 题目描述 个人解法 思路： todo代码示例：（Java） todo复杂度分析 todo官方解法 62-不同路径-官方解法 方法1：动态规划 思路： 代码示例：（Java&…...
HarmonyOS NEXT应用开发，关于useNormalizedOHMUrl选项的坑
起因是这样的：我这库打包发布出问题了，这个有遇到的吗？ 源码里面就没有 request .d.ts,这打包后哪来个这文件？且漏掉了其他文件。 猫哥csdn.yyz_1987 为啥我打包的har里面，只有接口，没有具体实现呢&#x…...
)
基于SpringBoot实现的编程训练系统(代码+论文)
🎉博主介绍：Java领域优质创作者，阿里云博客专家，计算机毕设实战导师。专注Java项目实战、毕设定制/协助 📢主要服务内容：选题定题、开题报告、任务书、程序开发、项目定制、论文辅导 💖精彩专栏…...
Spring Cloud Stream实现数据流处理
1.什么是Spring Cloud Stream？ Spring Cloud Stream的核心是Stream，准确来讲Spring Cloud Stream提供了一整套数据流走向（流向）的API， 它的最终目的是使我们不关心数据的流入和写出，而只关心对数据的业务处…...
DETR：End-to-End Object Detection with Transformers
【DETR 论文精读【论文精读】-哔哩哔哩】 https://b23.tv/Iy9k4O2 【DETR源码解读4-哔哩哔哩】 https://b23.tv/Qp1uH5v 摘要： 将目标检测看作一个集合预测的问题 任务：给定一张图片，预测一组框，每个框需要得到坐标信息和包含的…...
【C++/Qt 】使用QCustomplot类打造一款数学函数图像生成工具（支持latex公式渲染+Python连接AI大模型）
✨✨ Rqtz 个人主页 : 点击✨✨ 🌈Qt系列专栏:点击 软件介绍 基于Qt的开源项目QCustomplot类的一款在线的数学函数图像生成工具，涉及到了数学的latex公式渲染，如何将latex语法转换为Python的函数，和如何在Qt中使用QCustomplot类进…...
Hackathon靶机系列Hackathon2
扫描ip： 获得靶机的ip：192.168.108.134 扫描端口： 获得80端口，7223的ssh和一个ftp服务器服务器中存在两个文件： 先看ftp： 默认用户名为ftp： 下载两个文件： 和 打开flag1.txt: 获得…...
Mybatis 复习
1 什么是MyBatis MyBatis是一个优秀的持久层框架，它对JDBC操作数据库的过程进行封装，使开发者只需要关注 SQL 本身，而不需要花费精力去处理例如注册驱动、创建connection、创建statement、手动设置参数、 结果集检索等JDBC繁杂的过程代码 。…...
BurpSuite安装教程（详细！！附带下载链接）
声明 学习内容来自 B 站UP主泷羽sec，如涉及侵权马上删除文章。 笔记的只是方便各位师傅学习知识，以下网站只涉及学习内容，其他的都与本人无关，切莫逾越法律红线，否则后果自负。 ✍🏻作者简介：致…...
Istio_05_Istio架构
Istio_05_Istio架构 ArchitectureControl PlanePilotCitadelGalley Data PlaneSidecarIstio-proxyPilot-agentMetadta Exchange Ambient Architecture 如: Istio的架构(控制面、数据面) Gateway: Istio数据面的出/入口网关 Gateway分为: Ingress-gateway、Egress-gateway外部访…...
R语言结构方程模型（SEM）在生态学领域中的应用
目录 专题一、R/Rstudio简介及入门 专题二、结构方程模型（SEM）介绍 专题三：R语言SEM分析入门：lavaan VS piecewiseSEM 专题四：SEM全局估计（lavaan）在生态学领域高阶应用 专题五࿱…...
node.js基础学习-fs模块-文件操作（六）
一、前言 fs模块是 Node.js 内置的文件系统（File System）模块，它提供了一系列用于与文件系统进行交互的方法。通过fs模块，可以对文件或目录进行读取、写入、删除、重命名、查询状态等操作，这使得 Node.js 能够很好地处…...
EXCEL截取某一列从第一个字符开始到特定字符结束的字符串到新的一列
使用EXCEL中的公式进行特定截取 假设列A是一组产品的编码，我们需要的数据是“-”之前的字段。 我们需要在B1单元格输入公式“LEFT(A1,SEARCH("-",A1)-1)”然后选中B1至B4单元格，按“CTRLD”向下填充，就可以得出其它几行“-”之前的…...
JVM的垃圾回收算法有哪些
标记清除算法 标记清除算法，是将垃圾回收分为2个阶段，分别是标记和清除 根据可达性分析算法得出的垃圾进行标记对这些标记为可回收的内容进行垃圾回收 优点:标记和清除速度较快缺点:碎片化较为严重，内存不连贯的 标记整理算法 优缺点同标记…...
看华为，引入IPD的正确路径
目录 前言 引发重视 作者简介 前言 华为将 IPD 的引入过程归结为三步： 先僵化、后优化、再固化。 如果只是单纯模仿，在不清楚底层逻辑的情况下， 就开始走先僵化的流程，去搞削足适履式的引入。 开始执行后，你就…...
2024142读书笔记|《别无归处是归处》——一壶酒，一竿身，世上如侬有几人
2024142读书笔记|《别无归处是归处》——一壶酒，一竿身，世上如侬有几人 《别无归处是归处：吴镇的“渔父”画题（文人画的真性）》作者朱良志。诗词与古画并存的一本书，古画是比较偏复古黯淡微黄及墨色的&…...
think php处理 异步 url 请求 记录
1、需求 某网站 需要 AI生成音乐，生成mp3文件的时候需要等待，需要程序中实时监听mp3文件是否生成 2、用的开发框架 为php 3、文件结构 配置路由设置 Route::group(/music, function () {Route::post(/musicLyrics, AiMusic/musicLyrics);//Ai生成歌词流式…...
PostgreSQL详细安装教程
#安装PostgreSQL的yum仓库 sudo yum install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-7-x86_64/pgdg-redhat-repo-latest.noarch.rpm#安装PostgreSQL 15版本 sudo yum install -y postgresql15-server#初始化数据库（若要自定义数据库存储目录…...
电子电气架构 --- 车载网关GW连接外部IP Tester
我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 所谓鸡汤，要么蛊惑你认命，要么怂恿你拼命，但都是回避问题的根源，以现象替代逻辑，以情绪代替思考，把消极接受现实的懦弱，伪装成乐观面对不幸的…...
开发一套ERP 第八弹 RUst 插入数据
更全面的报错,方便检查错误在哪里,现代高级语言越来越智能 还是得看下原文档怎么操作的 src 目录为crate 的根目录 想在crate 中模块相互引入需要在 main 中声明,各个模块,然后才能在各个模块中相互引入和使用 原始工程引入,避免直接使用 lib.rs 回合cargo 中的一些 工程管理出…...
RFdiffusion Diffuser类解读
Diffuser 类是一个封装类，调用EuclideanDiffuser和IGSO3类，用于执行扩散模型的核心功能，主要针对分子或蛋白质结构的旋转（SO(3) 群上的扩散）和位移（欧几里得空间中的扩散）。 源代码： class Diffuser:# wrapper for yielding diffused coordinatesdef __init__(self,T…...
【pdf密码】为什么我的PDF文件不能复制文字？
大家现在接触PDF文件越来越多，有的时候在网上下载的PDF文件打开之后，发现选中文字之后无法复制。甚至其他功能也都无法使用，这是怎么回事？该怎么办？ 当我们发现文件打开之后，编辑功能无法使用，很…...
C#学写了一个程序记录日志的方法（Log类）
1.错误和警告信息单独生产文本进行记录； 2.日志到一定内存阈值可以打包压缩，单独存储起来，修改字段MaxLogFileSizeForCompress的值即可； 3.Log类调用举例：Log.Txt(JB.信息,“日志记录内容”,"通道1"); usi…...
Android Framework禁止弹出当前VOLTE不可用的提示窗口
文章目录 VoLTE简介VoLTE 的优势 当前VOLTE不可用的弹窗弹窗代码定位屏蔽弹出窗口 VoLTE简介 VoLTE（Voice over LTE）是一种基于4G LTE网络的语音通话技术。它允许用户在4G网络上进行高质量的语音通话和视频通话，而不需要回落到2G或3G网络。V…...
Maven Surefire 插件简介
Maven Surefire 插件是 Maven 构建系统中的一个关键组件，专门用于在构建生命周期中执行单元测试。 它通常与 Maven 构建生命周期的测试阶段绑定，确保所有单元测试在项目编译后和打包前被执行。 最新版本 Maven Surefire 插件的最新版本为 3.5.2。 使…...
vue3-新增API组件
shallowRef 创建一个响应式数据，但只对顶层属性进行响应式处理,只跟踪引用值的变化，不关心值内部的属性变化 import {shallowRef} from "vue" import UserInfo from "/components/UserInfo.vue";let name shallowRef("vue&quo…...
Linux随记（十三）
一、jstack随记 运行cmd cd C:\icp-agent\jdk_min\bin 执行 jstack PID > thread_dump.txt （查看PID：tasklist |findstr javaw 查看第二列） thread_dump.txt 取给研发二、让普通用户test，有权限使用docker指令 1、 查看当前用…...
AI数据分析工具（一）
Looker Studio（谷歌）-免费 优点 免费使用：对于中小型企业和个人用户来说，没有任何费用压力，可以免费享受到数据可视化和报表创建的功能。与Google服务集成：特别适合使用Google产品生态的企业，…...
dhcp服务
安装dhcp-libs和dhcp-common软件包是配置DHCP服务器的前提，但仅仅安装这两个软件包并不能直接开启DHCP服务器。您还需要进行以下步骤来完整配置和启动DHCP服务器： 安装DHCP服务器软件包： 除了dhcp-libs和dhcp-common，您还需要安装…...
RSA算法和AES算法，哪种更安全
目录 一、RSA (非对称加密算法) 二、AES (对称加密算法) 三、对比总结 四、更安全的选择 五、结合使用：RSA AES RSA 和 AES 是两种不同类型的加密算法，适用于不同的场景，因此它们的安全性不能直接比较，而是取决于具体的应用…...
反向代理模块开发
1 概念 1.1 反向代理概念 反向代理是指以代理服务器来接收客户端的请求，然后将请求转发给内部网络上的服务器，将从服务器上得到的结果返回给客户端，此时代理服务器对外表现为一个反向代理服务器。 对于客户端来说，反向代理就相当于…...
（微信小程序）基于Spring Boot的校园失物招领平台的设计与实现（vue3+uniapp+mysql）
💗博主介绍💗：✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示：文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐…...
1-7 GD32函数指针应用
前言： 本博客仅在应用函数指针与回调函数相关的知识，通过实践巩固所学知识，也是对相关知识点的回顾。 函数指针与回调函数：1-6 GD32函数指针与回调函数-CSDN博客 目录 前言： 1.0 程序架构思想 2.0 构建串口结构体 …...
前端js面试知识点思维导图（脑图）
如果看着不清晰可以去https://download.csdn.net/download/m0_73761441/90058523访问下载，无需积分 使用百度脑图制作，可以一键导入下面的文本生成自己的脑图 js相关面试题、知识点 数据类型 1. 数据类型分类？分别包含ÿ…...
使用 F5 TTS 文字转音频
F5 TTS 支持 ZeroShot 音频克隆，只有将需要音频传给模型，模型既可以生成以对应声音生成的音频，F5 最强大的地方就是可以使用定制的人声。F5 使用了 DIT 架构进行训练，结构如下： 本地使用 F5 TTS F5 使用很简单&#x…...
【笔记】自动驾驶预测与决策规划_Part8_数据驱动的规划方法
文章目录 0. 前言1.生成模型1.1 Diffusion-ES1. Diffusion-ES算法介绍2. Diffusion-ES算法具体流程Diffusion Model 是什么？Diffusion-ES: Evolutionary StrategiesDiffusion-ES MethodDiffusion-ES Mapping Language instructions to reward functions with LLM pr…...