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

Vue-Virtual-Scroller虚拟滚动

news 来源：原创 2025/8/21 10:33:46

前端优化不可不避的一谈之虚拟滚动：众所周知，滚动是直挺挺的往dom树加东西，如果滚太多滚到万级，渲染过多就会卡顿，而vue-virtual-scroll的灵活懒渲染就能解决这个问题

1，下载与配置

npm install --save vue-virtual-scroller@next

 2，main.ts中配置导入

import VueVirtualScroller from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'app.use(VueVirtualScroller)

3，使用如下：

Arr是自定义的比如一个对象数组，至少含有id，min-item-size是最小的高度默认px单位，key-field会读取posts中的id，列表的长度由posts长度决定，行内style的两个样式是必须有的，高度代表视窗高度，然后设置overscroll-scroll才能滚动，其他属性就没必要管了，不用去看官方又臭又长的文档

<template><DynamicScroller:style="'overflow':'scroll', 'height':'400px'":items="Arr":min-item-size="100"key-field="id"><template #default="{ item, index, active }"><DynamicScrollerItem:item="item":active="active":data-index="index">// 这里放置需要循环的代码</DynamicScrollerItem></template></DynamicScroller>
</template>

相关文章：

Vue-Virtual-Scroller虚拟滚动

前端优化不可不避的一谈之虚拟滚动&#xff1a;众所周知&#xff0c;滚动是直挺挺的往dom树加东西&#xff0c;如果滚太多滚到万级&#xff0c;渲染过多就会卡顿&#xff0c;而vue-virtual-scroll的灵活懒渲染就能解决这个问题 1&#xff0c;下载与配置 npm install --save v…...

编程日记 2025/8/21 10:33:46

Matlab:矩阵运算篇——矩阵

目录 1.定义 实例——创建矩阵 实例——创建复数矩阵 2.矩阵的生成 实例——M文件矩阵 2.利用文本创建 实例——创建生活用品矩阵 3.创建特殊矩阵 实例——生成特殊矩阵 4.矩阵元素的运算 1.矩阵元素的修改 实例——新矩阵的生成 2.矩阵的变维 实例——矩阵维度修…...

编程日记 2025/8/16 6:23:20

[Java]使用java进行JDBC编程

首先要从中央仓库下载api(类似驱动程序)&#xff0c;为了链接java和mysql 下载jar包&#xff0c;需要注意的是jar包的版本要和mysql保持一致 下面是新建文件夹lib&#xff0c;把jar包放进去&#xff0c;并添加为库 sql固定的情况下运行 import com.mysql.cj.jdbc.MysqlDataSo…...

编程日记 2025/8/16 11:12:32

HippoRAG 2 原理精读

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 整体流程离线索引阶段在线检索和问答阶段 总结 整体流程 从上图可以看出&#xff0c;整个流程分为两个阶段 1、离线索引阶段 2、在线检索和问答阶段 离线索引阶段…...

编程日记 2025/8/21 1:39:45

HTTPS协议原理：在Linux世界里的加密冒险

大家好&#xff0c;欢迎来到这次奇妙的HTTPS协议探险之旅&#xff01;今天&#xff0c;我们将一起潜入Linux的深处&#xff0c;揭开HTTPS协议那神秘而迷人的面纱。别担心&#xff0c;即使你是技术小白&#xff0c;也能在这场冒险中找到乐趣和收获。想象一下&#xff0c;你是一位…...

编程日记 2025/8/19 23:08:45

Spring Boot启动流程及源码实现深度解析

Spring Boot启动流程及源码实现深度解析 一、启动流程概述 Spring Boot的启动流程围绕SpringApplication类展开&#xff0c;核心流程可分为以下几个阶段&#xff1a; 初始化阶段&#xff1a;推断应用类型&#xff0c;加载ApplicationContextInitializer和ApplicationListene…...

编程日记 2025/8/21 10:31:58

使用pip在Windows机器上安装Open Webui，配合Ollama调用本地大模型

之前的文章分享过在 linux 服务器上安装&#xff0c;并使用Open-webui 来实现从页面上访问本地大模型的访问。也写了文章分享了我在家里 Windows Server 台式机上安装 Ollama 部署本地大模型&#xff0c;并分别使用 Chatbox 和 CherryStudio 来访问本地的大模型。今天我来分享一…...

编程日记 2025/8/16 12:52:49

go map的声明和使用

1.简介 map是key-value数据结构&#xff0c;又称为字段或者关联数据。类似其他语言的集合&#xff0c;map在go中是引用类型&#xff0c;必须初始化才能使用。 2.语法 map[keytype]valuetype keytype:表示间的类型。可以是基本数据类型&#xff0c;还可以是指针、channl等。…...

编程日记 2025/8/19 4:26:07

word毕业论文“et al.”替换为“等”——宏

Sub 中文参考文献改等()中文参考文献改等 宏Selection.Find.ClearFormattingSelection.Find.Replacement.ClearFormattingWith Selection.Find.Text "([一-龥], )et al.".Replacement.Text "\1等.".Forward True.Wrap wdFindContinue.Format False.Ma…...

编程日记 2025/8/21 4:31:05

23. 观察者模式

原文地址: 观察者模式 更多内容请关注&#xff1a;智想天开 1. 观察者模式简介 观察者模式&#xff08;Observer Pattern&#xff09;是一种行为型设计模式&#xff0c;用于建立对象之间的一种一对多的依赖关系。当一个对象的状态发生变化时&#xff0c;所有依赖于它的对象都…...

编程日记 2025/8/16 12:14:10

go的”ambiguous import in multiple modules”

执行“go mod tidy”报如下错误&#xff1a; go mod tidy -compat1.17 go: finding module for package github.com/gomooon/goredis go: found github.com/gomooon/goredis in github.com/gomooon/goredis v0.3.5 go: github.com/gomooon/core importsgithub.com/gomooon/gor…...

编程日记 2025/8/17 17:30:32

【鸿蒙开发】MongoDB入门

https://www.mongodb.com/try/download/community 下载MongoDB: var mongoose require("mongoose");// localhost 域名&#xff0c;代表本机 // 127.0.0.1 ip , 代码本机 mongoose.connect("mongodb://localhost:27017/jiaju").then(() > {console.l…...

编程日记 2025/8/16 9:54:33

【应用篇】MLU上deepseek/QwQ-32B+dify实现workflow应用

文章目录 前言一、平台环境选择二、创建容器应用三、启动服务1.下载deepseekR1-14B模型2.VLLM启动服务3.postman测试服务 四、workflow搭建1.搭建第一个工作流2.详细配置 五、效果演示 前言 本章主要讲解如何用paas平台&#xff0c;实现智能体应用 本章中大模型我们使用deeps…...

编程日记 2025/8/20 15:23:48

vue组件库el-menu导航菜单设置index，地址不会变更的问题

请先确认 1.路由已配置好 route-index.js如下&#xff0c; 2.view-ProHome.vue中已预留路由展示位 3.导航菜单复制组件库&#xff0c;并做修改 其中index与路由配置的地址一致 运行后发现点击菜单&#xff0c;url地址还是不变&#xff0c;查看组件库 Element - The worlds …...

编程日记 2025/8/16 11:38:24

防抖和节流

防抖&#xff08;Debounce&#xff09;和节流&#xff08;Throttle&#xff09;是前端开发中常用的两种性能优化技术&#xff0c;主要用于控制高频事件的触发频率&#xff0c;避免不必要的性能消耗。 1. 防抖&#xff08;Debounce&#xff09; 防抖的核心思想&#xff1a;在事…...

编程日记 2025/8/20 20:46:53

Deepseek可以通过多种方式帮助CAD加速工作

自动化操作&#xff1a;通过Deepseek的AI能力&#xff0c;可以编写脚本来自动化重复性任务。例如&#xff0c;使用Python脚本调用Deepseek API&#xff0c;在CAD中实现自动化操作。 插件开发&#xff1a;结合Deepseek进行二次开发&#xff0c;可以创建自定义的CAD插件。例如&a…...

编程日记 2025/8/16 11:17:14

基于Spring Boot的宠物猫认养系统的设计与实现（LW+源码+讲解）

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…...

编程日记 2025/8/19 22:58:42

开源！速度100Kb/s的有线和无线双模ESP32S3芯片的DAP-Link调试器

开源&#xff01;速度100Kb/s的有线和无线双模ESP32S3芯片的DAP-Link调试器 目录 开源&#xff01;速度100Kb/s的有线和无线双模ESP32S3芯片的DAP-Link调试器本项目未经授权&#xff0c;禁止商用&#xff01;本项目未经授权&#xff0c;禁止商用&#xff01;本项目未经授权&…...

编程日记 2025/8/19 9:27:44

Vue3 模板引用：打破数据驱动的次元壁（附高阶玩法）

在数据驱动的Vue世界中&#xff0c;模板引用&#xff08;Template Refs&#xff09;是我们与真实DOM对话的秘密通道。本文将带你深入理解这个"逃生舱"的正确打开方式&#xff0c;并分享实战中的高阶技巧。 一、基础入门&#xff1a;建立DOM连接 1. 创建模板引用 &…...

编程日记 2025/8/15 15:10:11

第五天 Labview数据记录（5.5 SQL数据库读写）

5.5 SQL数据库读写 SQL 数据库读写操作是现代软件开发、数据分析和企业信息系统的核心功能。其意义不仅体现在技术层面&#xff0c;还涉及到业务流程优化、数据管理、决策支持等多个方面。以下是 SQL 数据库读写操作的重要意义&#xff1a;1. 数据存储与管理&#xff1b;2. 支…...

编程日记 2025/8/16 9:54:40

微信小程序项目引入图片问题：Error: module ‘assets/img/topImg.jpg.js‘ is not defined

问题与处理策略 问题描述 在微信小程序项目中&#xff0c;通过 require 引入图片文件&#xff0c;报如下错误 Error: module assets/img/topImg.jpg.js is not defined, require args is ../../assets/img/topImg.jpg# 翻译错误&#xff1a;未定义模块“assets/img/topImg.…...

编程日记 2025/8/19 11:46:36

02C#基本结构篇（D4_注释-访问修饰符-标识符-关键字-运算符-流程控制语句）

目录 一、注释 1. 单行注释 2. 多行注释 3. XML文档注释 4. 使用建议和最佳实践&#xff1a; 二、访问修饰符 1. public 2. private 3. protected 4. internal 5. protected internal 或 protected and internal 6. private protected 或 private and protected 7.…...

编程日记 2025/8/20 5:29:48

Python：正则表达式

正则表达式的基础和应用 一、正则表达式核心语法&#xff08;四大基石&#xff09; 1. ​元字符&#xff08;特殊符号&#xff09;​ ​定位符 ^&#xff1a;匹配字符串开始位置 $&#xff1a;匹配字符串结束位置 \b&#xff1a;匹配单词边界​&#xff08;如 \bword\b 匹配…...

编程日记 2025/8/16 12:09:07

ChatGPT4.5详细介绍和API调用详细教程

OpenAI在2月27日发布GPT-4.5的研究预览版——这是迄今为止OpenAI最强大、最出色的聊天模型。GPT-4.5在扩大预训练和微调规模方面迈出了重要的一步。通过扩大无监督学习的规模&#xff0c;GPT-4.5提升了识别内容中的模式、建立内容关联和生成对于内容的见解的能力&#xff0c;但…...

编程日记 2025/8/20 10:20:42

linux makefile tutorial

一个makefile的教程&#xff0c;几个小时就能看完&#xff0c;对makefile有个总体加细节的系统了解&#xff0c;非常不错&#xff1a; Learn Makefiles With the tastiest examples 中文翻译版&#xff1a; 起步 - Makefile 教程 (gavinliu6.github.io) gcc官网手册&#x…...

编程日记 2025/8/16 11:15:24

学习C2CRS Ⅲ (Response Generation Module)

代码地址：https://github.com/RUCAIBox/WSDM2022-C2CRS 论文地址：https://arxiv.org/abs/2201.02732 CFSelectionConvModel模型结构与功能 CFSelectionConvModel 是一个用于对话推荐系统的端到端模型，结合了知识图谱（KG）、评论信息和对话上下文来生成对话响应。它通过以…...

编程日记 2025/8/20 10:52:51

SpringBoot全栈开发：从数据库到Markdown文件导出的终极实践指南

一、SpringBoot后端核心实现 1.1 数据库数据转MD文件 通过SpringBoot实现数据库内容导出为Markdown文件&#xff0c;是文档自动化生成的关键技术&#xff1a; GetMapping("/download") public void exportMd(HttpServletResponse response, Integer id) {Content …...

编程日记 2025/8/20 11:58:57

go函数详解

1.简介 函数是组织好的、可重复使用的&#xff0c;用于执行指定任务的代码块&#xff0c;为了完成某一个功能的程序指令的集合&#xff0c;称为函数。go语言中支持&#xff1a;函数、匿名函数和闭包。 2.函数的定义 func 函数名 (形参列表) (返回值列表){ 函数体 return …...

编程日记 2025/8/19 20:29:14

MVCC实现原理

一、引言 在现代数据库管理系统中&#xff0c;数据的一致性和并发性是两个至关重要的特性。传统的锁机制虽然有效&#xff0c;但也存在着性能瓶颈&#xff0c;特别是在高并发环境下&#xff0c;锁的争用会导致系统响应时间变慢&#xff0c;甚至引发死锁等问题。为了克服这些挑…...

编程日记 2025/8/20 6:40:32

通过Golang的container/list实现LRU缓存算法

文章目录 力扣&#xff1a;146. LRU 缓存主要结构 List 和 Element常用方法1. 初始化链表2. 插入元素3. 删除元素4. 遍历链表5. 获取链表长度使用场景注意事项 源代码阅读 在 Go 语言中&#xff0c;container/list 包提供了一个双向链表的实现。链表是一种常见的数据结构&#…...

编程日记 2025/8/18 16:53:06

网络编程7天学java

* 网络编程&#xff1a;两台或两台以上的主机构成一个网络 * IP地址&#xff1a;标志网络中的一个通信实体的地址 * 端口号&#xff1a;区分不同应用程序 * 网络通信协议&#xff1a;ISO参考模型&#xff08;7层&#xff09;&#xff0c;TCP/IP协议&#xff08;4层&#xff09;…...

编程日记 2025/8/16 9:44:26

在 IntelliJ IDEA 中配置 Git

1. 确保已安装 Git 在配置之前&#xff0c;确保你的系统已经安装了 Git。 检查是否已安装 Git&#xff1a; bash 复制 git --version 如果未安装&#xff0c;请前往 Git 官网 下载并安装。 2. 在 IntelliJ IDEA 中配置 Git 打开 IntelliJ IDEA。 进入设置&#xff1a; Windo…...

编程日记 2025/8/21 1:31:50

【Godot4.4】Rect2总结

概述 Rect2是2D场景中比较重要的一种数据类型。 Rect2的本质含义是2D场景的轴对齐包围盒&#xff0c;而不是可以自由变换的矩形。 Rect2提供了一些方法&#xff0c;可以方便的判断Rect2之间是否重叠、包含等&#xff0c;并可以获得重叠的区域。也可以获得两个Rect2的包围盒。…...

编程日记 2025/8/16 11:29:54

git使用命令总结

文章目录 Git 复制创建提交步骤Git 全局设置:创建 git 仓库:已有仓库? 遇到问题解决办法&#xff1a;问题一先git pull一下&#xff0c;具体流程为以下几步&#xff1a; 详细步骤 Git 复制 git clone -b RobotModelSetting/develop https://gitlab.123/PROJECT/123.git创建提…...

编程日记 2025/8/16 10:36:29

Unity DOTS从入门到精通之 C# Job System

文章目录 前言安装 DOTS 包C# 任务系统Mono 环境DOTS 环境运行作业NativeContainer 前言 作为 DOTS 教程&#xff0c;我们将创建一个旋转立方体的简单程序&#xff0c;并将传统的 Unity 设计转换为 DOTS 设计。 Unity 2022.3.52f1Entities 1.3.10 安装 DOTS 包 要安装 DOTS…...

编程日记 2025/8/20 23:46:16

linux下的网络抓包(tcpdump)介绍

linux下的网络抓包[tcpdump]介绍 前言tcpdump1. 安装 tcpdump2. 基本抓包命令3. 过滤器使用4. 保存捕获的数据包 异常指标1. 连接建立与断开相关指标异常 SYN 包异常 FIN 或 RST 包 2. 流量相关指标异常流量峰值异常源或目的 IP 流量 3. 端口相关指标异常端口使用端口扫描 4. 数…...

编程日记 2025/8/16 13:04:49

深入理解 Linux 中的 -h 选项：让命令输出更“人性化”

在 Linux 系统中&#xff0c;命令行工具是系统管理员和普通用户最常用的交互方式之一。然而&#xff0c;命令行输出往往充满了技术性术语和数字&#xff0c;对于初学者或非技术用户来说可能显得晦涩难懂。幸运的是&#xff0c;许多 Linux 命令都提供了一个非常实用的选项&#…...

编程日记 2025/8/16 12:55:12

selenium的鼠标操作

1、鼠标操作 鼠标时间对应的方法在那个类中&#xff1f; ​ ActionChains类,实例化 鼠标对象 1、context_click(element) # 右击 2、double_click(element) #双击 3、double_and_drop(source, target) # 拖拽 4、move_to_element(element) # 悬停 【重点】 5、perform() …...

编程日记 2025/8/18 10:44:46

STM32——GPIO介绍

GPIO（General-Purpose IO ports，通用输入/输出接口）模块是STM32的外设接口的核心部分，用于感知外界信号（输入模式）和控制外部设备（输出模式），支持多种工作模式和配置选项。 1、GPIO 基本结构 STM32F407 的每个 GPIO 引脚均可独立配置，主要特性包括： 9 组 GPIO 端口…...

编程日记 2025/8/21 7:02:47

Word 小黑第15套

对应大猫16 修改样式集 导航 -查找 第一章标题不显示 再选中文字 点击标题一 修改标题格式 格式 -段落 -换行和分页 勾选与下段同页 添加脚注 &#xff08;脚注默认位于底部 &#xff09;在脚注插入文档属性&#xff1a; -插入 -文档部件 -域 类别选择文档信息&#xff0c;域…...

编程日记 2025/8/21 4:28:02

linux自启动服务

在Linux环境中&#xff0c;systemd是一个系统和服务管理器&#xff0c;它为每个服务使用.service文件进行配置。systemctl是用于控制系统服务的主要工具。本文将详细介绍如何使用systemctl来管理vsftpd服务&#xff0c;以及如何设置服务自启动。 使用Systemd设置自启动服务 创…...

编程日记 2025/8/19 8:21:23

react使用拖拽，缩放组件，采用react-rnd解决 -完整版

屏幕录制2025-03-10 10.16.06 以下代码仅提供左侧可视化区域 右侧数据根据你们的存储数据来 大家直接看Rnd标签设置的属性即可&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; /*** 用户拖拽水印的最终位置信息*/ export interface ProductWatermarkValue {wat…...

编程日记 2025/8/15 22:22:03

通过 ElasticSearch的Python API和`curl` 命令获取Elasticsearch 所有索引名称

导言 在大数据管理和实时搜索场景中&#xff0c;Elasticsearch 是一款不可或缺的工具。无论是开发调试、数据维护&#xff0c;还是系统监控&#xff0c;快速列出所有索引名称都是一个高频需求。本文将手把手教你如何通过 Python 客户端连接 Elasticsearch&#xff0c;并用两种方…...

编程日记 2025/8/21 6:41:45

Flutter：StatelessWidget vs StatefulWidget 深度解析

目录 1. 引言 2. StatelessWidget&#xff08;无状态组件&#xff09; 2.1 定义与特点 2.2 代码示例 3. StatefulWidget&#xff08;有状态组件&#xff09; 3.1 定义与特点 3.2 代码示例 4. StatelessWidget vs StatefulWidget 对比 5. StatefulWidget 生命周期 5.1…...

编程日记 2025/8/16 12:53:31

[密码学实战]Java实现国密TLSv1.3单向认证

一、代码运行结果 1.1 运行环境 1.2 运行结果 1.3 项目架构 二、TLS 协议基础与国密背景 2.1 TLS 协议的核心作用 TLS（Transport Layer Security） 是保障网络通信安全的加密协议，位于 TCP/IP 协议栈的应用层和传输层之间，提供： • 数据机密性：通过对称加密算法（如 AE…...

编程日记 2025/8/16 9:54:15

蓝桥杯省赛真题C++B组2024-握手问题

一、题目 【问题描述】 小蓝组织了一场算法交流会议&#xff0c;总共有 50 人参加了本次会议。在会议上&#xff0c;大家进行了握手交流。按照惯例他们每个人都要与除自己以外的其他所有人进行一次握手(且仅有一次)。但有 7 个人&#xff0c;这 7 人彼此之间没有进行握手(但这…...

编程日记 2025/8/20 17:07:09

项目实操分享：一个基于 Flask 的音乐生成系统，能够根据用户指定的参数自动生成 MIDI 音乐并转换为音频文件

在线体验音乐创作&#xff1a;AI Music Creator - AI Music Creator 体验者账号密码admin/admin123 系统架构 1.1 核心组件 MusicGenerator 类 负责音乐生成的核心逻辑 包含 MIDI 生成和音频转换功能 管理音乐参数和音轨生成 FluidSynth 集成 用于 MIDI 到音频的转换 …...

编程日记 2025/8/16 12:36:57

Java开发者如何接入并使用DeepSeek

目录 一、准备工作 二、添加DeepSeek SDK依赖 三、初始化DeepSeek客户端 四、数据上传与查询 五、数据处理与分析 六、实际应用案例 七、总结 【博主推荐】&#xff1a;最近发现了一个超棒的人工智能学习网站&#xff0c;内容通俗易懂&#xff0c;风格风趣幽默&#xff…...

编程日记 2025/8/19 23:09:44

多方安全计算(MPC)电子拍卖系统

目录 一、前言二、多方安全计算(MPC)与电子拍卖系统概述2.1 多方安全计算(MPC)的基本概念2.2 电子拍卖系统背景与需求三、MPC电子拍卖系统设计原理3.1 系统总体架构3.2 电子拍卖中的安全协议3.3 数学与算法证明四、数据加解密模块设计五、GPU加速与系统性能优化六、GUI设计与系…...

编程日记 2025/8/16 9:54:23

【数据库系统概论】第十一章 并发控制

第十一章 并发控制 11.1 并发控制概述&#xff08;1&#xff09;丢失修改&#xff08;2&#xff09;不可重复读&#xff08;3&#xff09;读“脏”数据 11.2 封锁11.2.1 封锁的概念11.2.2 基本封锁类型&#xff08;1&#xff09;排它锁/X锁/写锁&#xff08;2&#xff09;共享锁…...

编程日记 2025/8/16 10:00:38