当前位置: 首页 > news >正文

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>

相关文章:

vue长列表,虚拟滚动

1.新建子组件&#xff0c;将数据传递过去(几万条数据的数组&#xff0c;一次性展示多少条&#xff0c;每条数据的行高). <template><div class"vitualScroll"><sub-scroll :dataList"dataList" :rowCount"20" :rowHeight"2…...

【实战场景】记一次UAT jvm故障排查经历

【实战场景】记一次UAT jvm故障排查经历 开篇词&#xff1a;干货篇&#xff1a;1.查看系统资源使用情况2.将十进制进程号转成十六进制3.使用jstack工具监视进程的垃圾回收情况4.输出指定线程的堆内存信息5.观察日志6.本地环境复现 总结篇&#xff1a;我是杰叔叔&#xff0c;一名…...

线性代数--行列式1

本篇来自对线性代数第一篇的行列式的一个总结。 主要是行列式中有些关键点和注意事项&#xff0c;便于之后的考研复习使用。 首先&#xff0c;对于普通的二阶和三阶行列式&#xff0c;我们可以直接对其进行拆开&#xff0c;展开。 而对于n阶行列式 其行列式的值等于它的任意…...

tensorflow神经网络

训练一个图像识别模型&#xff0c;使用TensorFlow&#xff0c;需要以下步骤。 1. 安装所需的库 首先&#xff0c;确保安装了TensorFlow和其他所需的库。 pip install tensorflow numpy matplotlib2. 数据准备 需要收集和准备训练数据。每个类别应有足够多的样本图像。假设有…...

Python基础001

Python输出语句 print输出字符串 print("中国四大名著&#xff1a;","西游记|","三国演义|","红楼梦|","水浒传") print(6) print(1 1)Python输入语句 input函数 input() input("我的名字是&#xff1a;") p…...

【udp报文】udp报文未自动分片,报文过长被拦截问题定位

问题现象 某局点出现一个奇怪的现象&#xff0c;客户端给服务端发送消息&#xff0c;服务端仅能收到小部分消息&#xff0c;大部分消息从客户端发出后&#xff0c;服务端都未收到。 问题定位 初步分析 根据现象初步分析&#xff0c;有可能是网络原因导致消息到服务端不可达&a…...

某网页gpt的JS逆向

原网页网址 (base64) 在线解码 aHR0cHM6Ly9jbGF1ZGUzLmZyZWUyZ3B0Lnh5ei8 逆向效果图 调用代码&#xff08;复制即用&#xff09; 把倒数第三行换成下面的base64解码 aHR0cHM6Ly9jbGF1ZGUzLmZyZWUyZ3B0Lnh5ei9hcGkvZ2VuZXJhdGU import hashlib import time import reques…...

【python脚本】批量检测sql延时注入

文章目录 前言批量检测sql延时注入工作原理脚本演示 前言 SQL延时注入是一种在Web应用程序中利用SQL注入漏洞的技术&#xff0c;当传统的基于错误信息或数据回显的注入方法不可行时&#xff0c;例如当Web应用进行了安全配置&#xff0c;不显示任何错误信息或敏感数据时&#x…...

在C++中如何理解const关键字的不同用法(如const变量、const成员函数、const对象等)

在C中&#xff0c;const关键字是一个非常重要的修饰符&#xff0c;它用于指明变量、函数参数、成员函数或对象的内容是不可变的。理解const的不同用法对于编写高质量、易维护的C代码至关重要。下面详细解释const在几种不同上下文中的用法和含义。 1. const变量 当变量被声明为…...

JavaSEJava8 时间日期API + 使用心得

文章目录 1. LocalDate2. LocalTime3. LocalDateTime3.1创建 LocalDateTime3.2 LocalDateTime获取方法 4. LocalDateTime转换方法4.1 LocalDateTime增加或者减少时间的方法4.2 LocalDateTime修改方法 5. Period6. Duration7. 格式转换7.1 时间日期转换为字符串7.2 字符串转换为…...

【亲测解决】Python时间问题

微信公众号&#xff1a;leetcode_algos_life&#xff0c;代码随想随记 小红书&#xff1a;412408155 CSDN&#xff1a;https://blog.csdn.net/woai8339?typeblog &#xff0c;代码随想随记 GitHub: https://github.com/riverind 抖音【暂未开始&#xff0c;计划开始】&#xf…...

Linux屏幕驱动开发调试笔记

引言 首先了解下什么是MIPI-DSI&#xff1a; MIPI-DSI是一种应用于显示技术的串行接口&#xff0c;兼容DPI(显示像素接口&#xff0c;Display Pixel Interface)、DBI(显示总线接口&#xff0c;Display Bus Interface)和DCS(显示命令集&#xff0c;Display Command Set)&#…...

Nginx Http缓存的必要性!启发式缓存有什么弊端?

&#x1f440; Nginx Http缓存的必要性&#xff01;启发式缓存有什么弊端&#xff1f; 简介启发式缓存引发的问题nginx缓存配置 简介 我们在使用React或者Vue开发项目中会使用hash、chunkhash、contenthash来给静态资源文件进行命名。这带来的好处便是当我们部署完项目后&…...

【RT摩拳擦掌】RT云端测试之百度天工物接入构建(设备型)

【RT摩拳擦掌】RT云端测试之百度天工物接入构建&#xff08;设备型&#xff09; 一&#xff0c; 文档介绍二&#xff0c; 物接入IOT Hub物影子构建2.1 创建设备型项目2.2 创建物模型2.3 创建物影子 三&#xff0c; MQTT fx客户端连接云端3.1 MQTT fx配置3.2 MQTT fx订阅3.3 MQT…...

Mysql和ES使用汇总

一、mysql和ES在业务上的配合使用 一般使用时使用ES 中存储全文检索的关键字与获取的商品详情的id&#xff0c;通过ES查询获取查询商品的列表中展示的数据&#xff0c;通过展示id 操作去获取展示商品的所有信息。mysql根据id去查询数据库数据是很快的&#xff1b; 为什么ES一般…...

Android中使用performClick触发点击事件

Android中使用performClick触发点击事件 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将探讨在Android开发中如何使用 performClick() 方法来触发点击…...

重生之我要学后端01--后端语言选择和对应框架选择

编程语言 后端开发通常需要掌握至少一种编程语言。以下几种语言在后端开发中非常流行&#xff1a; Java&#xff1a;广泛用于企业级应用程序。Python&#xff1a;因其易学性和强大的库支持&#xff08;如Django和Flask&#xff09;而受欢迎。Node.js&#xff08;JavaScript&a…...

C语言 | Leetcode C语言题解之第206题反转链表

题目&#xff1a; 题解&#xff1a; struct ListNode* reverseList(struct ListNode* head) {if (head NULL || head->next NULL) {return head;}struct ListNode* newHead reverseList(head->next);head->next->next head;head->next NULL;return newHea…...

Flink Window DEMO 学习

该文档演示了fink windows的操作DEMO 环境准备&#xff1a; kafka本地运行&#xff1a;kafka部署自动生成名字代码&#xff1a;随机名自动生成随机IP代码&#xff1a;随机IPFlink 1.18 测试数据 自动向kafka推送数据 import cn.hutool.core.date.DateUtil; import com.alibab…...

library source does not match the bytecode for class SpringApplication

library source does not match the bytecode for class SpringApplication 问题描述&#xff1a;springboot源码点进去然后download source后提示标题内容。spring版本5.2.8.RELEASE&#xff0c;springboot版本2.7.18 解决方法&#xff1a;把spring版本改为与boot版本对应的6.…...

ES6从入门到精通:前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...

在 Spring Boot 中使用 JSP

jsp&#xff1f; 好多年没用了。重新整一下 还费了点时间&#xff0c;记录一下。 项目结构&#xff1a; pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...

Python实现简单音频数据压缩与解压算法

Python实现简单音频数据压缩与解压算法 引言 在音频数据处理中&#xff0c;压缩算法是降低存储成本和传输效率的关键技术。Python作为一门灵活且功能强大的编程语言&#xff0c;提供了丰富的库和工具来实现音频数据的压缩与解压。本文将通过一个简单的音频数据压缩与解压算法…...

react菜单,动态绑定点击事件,菜单分离出去单独的js文件,Ant框架

1、菜单文件treeTop.js // 顶部菜单 import { AppstoreOutlined, SettingOutlined } from ant-design/icons; // 定义菜单项数据 const treeTop [{label: Docker管理,key: 1,icon: <AppstoreOutlined />,url:"/docker/index"},{label: 权限管理,key: 2,icon:…...