vue长列表,虚拟滚动

1.新建子组件,将数据传递过去(几万条数据的数组,一次性展示多少条,每条数据的行高).

<template><div class="vitualScroll"><sub-scroll :dataList="dataList" :rowCount="20" :rowHeight="20"></sub-scroll></div>
</template><script>
import subScroll from "./components/subScroll.vue"
export default{name: 'virtualScroll',data(){return {//冻结数组,初步优化dataList: Object.freeze(new Array(20000).fill(null).map((item, index) => ({ n: index+1 })))}},components:{subScroll}
}
</script>
<style scoped lang="less">
.vitualScroll{width: 100%;height: 100%;
}
</style>

2.子组件subScroll.vue

div.scrollBar用来使父盒子出现滚动条,div.scrollBar的高度就是数据总条数*单条数据的高度。

div.list才是v-for数据的盒子,采用绝对定位,在父元素滑动事件中更新数据,并且将div.list的位置拉回来(div.list采用绝对定位,滑动滚动会往上跑)

<template><div class="scrollView" ref="scrollView" :style="{'--rowHeight': $props.rowHeight + 'px'}" @scroll="onScroll()"><div class="scrollBar" :style="{'--scrollBarHeight': $props.dataList.length * $props.rowHeight + 'px'}"></div><div class="list" ref="list"><div class="item" v-for="(item, index) in copyDataList" :key="index">{{ item.n }}</div></div></div>
</template><script>
export default{name: 'subScroll',data(){return {start: 0}},computed:{copyDataList(){return this.$props.dataList.slice(this.start, this.$props.rowCount + this.start)}},props:{dataList: {type: Array,default(){return [{}]}},rowCount: {type: Number,default: 0},rowHeight: {type: Number,default: 0}},mounted(){},methods: {onScroll(){//全局节流函数this.$throttle(this.updataData, 50)},updataData(){let offsetTop = this.$refs.scrollView.scrollToplet offsetNum = Math.round(offsetTop / this.$props.rowHeight)this.start = offsetNumthis.$refs.list.style.transform = `translateY(${offsetTop}px)`console.log('滑动的距离', offsetTop)}}
}
</script><style lang="less" scoped>
.scrollView{width: 200px;height: 400px;overflow: auto;position: relative;.item{height: var(--rowHeight);}.scrollBar{height: var(--scrollBarHeight);}.list{position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
}
</style>

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

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

相关文章

[JavaScript]“复杂”的 this

【版权声明】未经博主同意&#xff0c;谢绝转载&#xff01;&#xff08;请尊重原创&#xff0c;博主保留追究权&#xff09; https://blog.csdn.net/m0_69908381/article/details/140092319 出自【进步*于辰的博客】 参考笔记二&#xff0c;P6.1&#xff1b;笔记三&#xff0c…

【链表】- 两数相加

1. 对应力扣题目连接 两数相加 2. 实现案例代码 public class AddingTwoNumbers {public static void main(String[] args) {// 示例用例 1ListNode l1 new ListNode(2);l1.next new ListNode(4);l1.next.next new ListNode(5);ListNode l2 new ListNode(5);l2.next ne…

【Python爬虫】Python爬取喜马拉雅,爬虫教程!

一、思路设计 &#xff08;1&#xff09;分析网页 在喜马拉雅主页找到自己想要的音频&#xff0c;得到目标URL&#xff1a;https://www.ximalaya.com/qinggan/321787/ 通过分析页面的网络抓包&#xff0c;最终的到一个比较有用的json数据包 通过分析&#xff0c;得到了发送json…

docker部署前端,配置域名和ssl

之前使用80端口部署前端项目后&#xff0c;可以使用IP端口号在公网访问到部署的项目。 进行ICP域名备案后&#xff0c;可以通过域名解析将IP套壳&#xff0c;访问域名直接访问到部署的项目~ 如果使用http协议可以很容易实现这个需求&#xff0c;对nginx.conf文件进行修改&#…

Spring Boot集成DeepLearning4j实现图片数字识别

1.什么是DeepLearning4j&#xff1f; DeepLearning4J&#xff08;DL4J&#xff09;是一套基于Java语言的神经网络工具包&#xff0c;可以构建、定型和部署神经网络。DL4J与Hadoop和Spark集成&#xff0c;支持分布式CPU和GPU&#xff0c;为商业环境&#xff08;而非研究工具目的…

《昇思25天学习打卡营第28天 | 昇思MindSporeVision Transformer图像分类》

第28天 本节学习了Vision Transformer图像分类 ViT则是自然语言处理和计算机视觉两个领域的融合结晶。在不依赖卷积操作的情况下&#xff0c;依然可以在图像分类任务上达到很好的效果。ViT模型的主体结构是基于Transformer模型的Encoder部分&#xff08;部分结构顺序有调整&a…

Mojo: AI开发的革命性编程语言

------------->更多内容&#xff0c;请移步“鲁班秘笈”&#xff01;&#xff01;<------------- 刚刚Mojo和HuggingFace一样发布新版本&#xff0c;此版本编号为24.4&#xff0c;包括几个核心语言和标准库增强功能。此版本最大的亮点之一是收到了来自18个社区贡献者的21…

redis布隆过滤器原理及应用场景

目录 原理 应用场景 优点 缺点 布隆过滤器&#xff08;Bloom Filter&#xff09;是一种空间效率很高的随机数据结构&#xff0c;它利用位数组和哈希函数来判断一个元素是否存在于集合中。 原理 数据结构&#xff1a; 位数组&#xff1a;一个由0和1组成的数组&#xff0c;初始…

【AI应用探讨】—胶囊神经网络(GNN)应用场景

目录 一、图像识别与分类 二、目标检测与跟踪 三、自然语言处理 四、其他应用场景 一、图像识别与分类 多层次特征捕捉 胶囊网络通过其独特的胶囊结构和动态路由算法&#xff0c;能够捕捉图像中的多层次特征。每个胶囊不仅输出激活强度&#xff0c;还输出一个多维向量&…

Docker Desktop安装mysql

安装 Docker Desktop 1、访问 Docker Desktop 官方下载地址&#xff1a;https://www.docker.com/products/docker-desktop/ &#xff0c; 选择对应平台的 Docker Desktop 安装包点击下载&#xff1a; 2、下载成功后&#xff0c;双击开始安装&#xff1a; 3、安装之前的相关配…

产品经理-对产品经理的认识(1)

今天跟大家聊一下产品经理这个岗位的,产品经理是互联网岗位当中比较火的一个岗位,也是最接近CEO的岗位 产品经理岗位&#xff0c;技术门槛低&#xff0c;薪水和前景都很不错&#xff0c;又处于团队的核心位置 产品经理岗位没有完全相关的专业设置和清晰的学习路径&#xff0c;绝…

Spring Boot中实现多数据源配置

Spring Boot中实现多数据源配置 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将探讨如何在Spring Boot应用中实现多数据源配置&#xff0c;以应对复杂…

java框架的落地实践案例:大数据平台设计与实现

使用 java 框架设计和实现大数据平台可为企业提供数据处理和分析解决方案&#xff0c;使之能够做出数据驱动的决策。系统采用微服务架构&#xff0c;分解数据处理任务为松散耦合组件&#xff0c;构建于 spring boot 等 java 框架之上。数据采集通过kafka 进行&#xff0c;数据清…

Rust借助dotenv库读取环境变量

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…

(亲测有效)2024代替电视家的app,电视家停了还有什么软件可以看电视?

嘿&#xff0c;大家好&#xff0c;我是阿星&#xff0c;今天又来跟大家聊聊那些让人眼前一亮的电视直播软件。咱们这回不聊那些老掉牙的&#xff0c;来点新鲜的&#xff0c;让咱们的电视屏幕也能跟上潮流&#xff0c;享受一下科技带来的便利和乐趣。 首先&#xff0c;得提一提…

如何评价CSS框架TailwindCSS?

端午三天&#xff0c;你们在放假&#xff0c;而我&#xff0c;一个人躲在家里&#xff0c;苦练 tailwindcss。 我在准备这样一个学习项目&#xff0c;它与传统的文章/视频类学习不同&#xff0c;我会在教程中内置大量的可交互案例&#xff0c;提供沉浸式的学习体验&#xff0c…

SpringMVC中执行流程

文章目录 14、SpringMVC执行流程14.1、SpringMVC常用组件14.2、DispatcherServlet初始化过程①初始化WebApplicationContext②创建WebApplicationContext③DispatcherServlet初始化策略 14.3、DispatcherServlet调用组件处理请求①processRequest()②doService()③doDispatch()…

Zynq7000系列FPGA中DMA引擎编程指南

DMA引擎的编程指南通常涉及一系列步骤和API调用&#xff0c;以确保数据在内存之间的高效传输&#xff0c;而无需CPU的直接干预。 DMA引擎的编程指南包括以下部分&#xff1a; 一、编写微代码为AXI事务编写CCRx程序 通道微码用于设置dmac.CCRx寄存器以定义AXI事务的属性。这是…

TikTok直播限流与网络的关系及解决方法

TikTok作为一款热门的社交平台&#xff0c;其直播功能吸引了大量用户。然而&#xff0c;一些用户可能会遇到TikTok直播限流的问题&#xff0c;例如直播过程中出现播放量低、直播画面质量差等情况。那么&#xff0c;TikTok直播限流与所使用的网络线路是否有关系&#xff1f;是否…

学习springIOC

第二章 Spring IOC 章节内容 Spring IOC技术实现Spring IOC设值注入Spring IOC构造注入 章节目标 掌握Spring IOC技术实现掌握Spring IOC设置注入掌握Spring IOC构造注入 第一节 Spring简介 1. Spring 简介 Spring 是目前主流的 Java 开发框架&#xff0c;是 Java 世界最…