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

虚拟列表 vue-virtual-scroller 的使用

npm 详情:vue-virtual-scroller - npm (npmjs.com)

这里我使用的是RecycleScroller。

App.vue

<template><RecycleScrollerclass="scroller":items="items":item-size="54"v-slot="{ item }"><list-item :item="item"></list-item></RecycleScroller>
</template><script>
import {RecycleScroller} from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import ListItem from "@/components/ListItem.vue";// items 是一个对象数组, item 传递给 ListItem 组件 是包含了对象数组的对象
var items = []
for (let i = 0; i < 10000; i++) {items.push({id: i + 1,name: 'User ' + (i + 1),})
}
export default {components: {ListItem,RecycleScroller},data() {return {items: items}}
}
</script><style scoped>
.scroller {height: 50vh;width: 50vw;background-color: #f5f5f5;padding: 10px;}
</style>

ListItem.vue

<script>export default {props: {item: Object}
}
</script><template><div class="list-item"><span>id{{item.id}}</span><span>name{{item.name}}</span><span>age{{item.count}}</span></div>
</template><style scoped>
.list-item {text-align: center;height: 54px;padding: 1em;box-sizing: border-box;display: grid;grid-template-columns: repeat(3, 1fr);box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
</style>

image.png

相关文章:

虚拟列表 vue-virtual-scroller 的使用

npm 详情&#xff1a;vue-virtual-scroller - npm (npmjs.com) 这里我使用的是RecycleScroller。 App.vue <template><RecycleScrollerclass"scroller":items"items":item-size"54"v-slot"{ item }"><list-item :it…...

前端基础入门三大核心之HTML篇:深入理解重绘与重排 —— 概念、区别与实战演练

前端基础入门三大核心之HTML篇&#xff1a;深入理解重绘与重排 —— 概念、区别与实战演练 HTML渲染基础回顾重绘与重排的概念重绘&#xff08;Repaint&#xff09;重排&#xff08;Reflow&#xff09; 区别与影响实战示例&#xff1a;优化策略与代码演示示例1&#xff1a;避免…...

【C/C++笔试练习】TCP、IP广播、ARP协议、IP路由器、MAC协议、三次握手、TCP/IP、子网划分年、会抽奖、抄送列表

文章目录 C/C笔试练习选择部分&#xff08;1&#xff09;TCP&#xff08;2&#xff09;IP广播&#xff08;3&#xff09;ARP协议&#xff08;4&#xff09;IP路由器&#xff08;5&#xff09;MAC协议&#xff08;6&#xff09;三次握手&#xff08;7&#xff09;TCP/IP&#xf…...

线程的概念和控制

文章目录 线程概念线程的优点线程的缺点线程异常线程用途理解虚拟地址 线程控制线程的创建线程终止线程等待线程分离封装线程库 线程概念 什么是线程&#xff1f; 在一个程序里的一个执行路线就叫做线程&#xff08;thread&#xff09;。更准确的定义是&#xff1a;线程是“一…...

PHS树脂(聚对羟基苯乙烯)为KrF光刻胶专用树脂 本土企业具备百公斤级别量产能力

PHS树脂&#xff08;聚对羟基苯乙烯&#xff09;为KrF光刻胶专用树脂 本土企业具备百公斤级别量产能力 PHS树脂又称聚对羟基苯乙烯树脂、聚羟基苯乙烯树脂&#xff0c;指以对羟基苯乙烯作为基材制成的光刻胶树脂。与其他光刻胶树脂相比&#xff0c;PHS树脂具有极佳热稳定性、化…...

Python 机器学习 基础 之 数据表示与特征工程 【单变量非线性变换 / 自动化特征选择/利用专家知识】的简单说明

Python 机器学习 基础 之 数据表示与特征工程 【单变量非线性变换 / 自动化特征选择/利用专家知识】的简单说明 目录 Python 机器学习 基础 之 数据表示与特征工程 【单变量非线性变换 / 自动化特征选择/利用专家知识】的简单说明 一、简单介绍 二、单变量非线性变换 三、自…...

uniapp-自定义navigationBar

封装导航栏自定义组件 创建 nav-bar.vue <script setup>import {onReady} from dcloudio/uni-appimport {ref} from vue;const propsdefineProps([navBackgroundColor])const statusBarHeight ref()const navHeight ref()onReady(() > {uni.getSystemInfo({success…...

多式联运奇迹:探索 GPT-4o 的尖端功能

取得的显着进展的DigiOps与人工智能已经标志着重要的里程碑&#xff0c;随着时间的推移塑造了人工智能系统的能力。从早期基于规则系统的出现机器学习和深入学习&#xff0c;人工智能已经发展得更加先进和通用。 生成式预训练 Transformer (GPT) by OpenAI 已特别值得注意。每…...

前端 CSS 经典:好看的标题动画

前言&#xff1a;好看的标题动画实现。 效果&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><…...

Vue项目打包优化(element+echarts+vue使用cdn)

如何打包查看所有资源大小&#xff1f; 使用插件&#xff1a;webpack-bundle-analyzer 效果图&#xff1a; 安装webpack-bundle-analyzer 第一步&#xff0c;终端执行 npm instatll webpack-bundle-analyzer --save-dev第二步&#xff0c;vue.config.js配置 module.export…...

【ARM 嵌入式 C 入门及渐进 6.1 -- ARMv8 C 内嵌汇编写系统寄存器的函数实现】

请阅读【嵌入式开发学习必备专栏】 文章目录 ARMv8 C 内嵌汇编写系统寄存器 ARMv8 C 内嵌汇编写系统寄存器 在ARMv8架构下&#xff0c;使用C语言结合内嵌汇编实现将一个值写入特定系统寄存器的函数可以按照下面的方法进行。 下面这个示例展示了如何将一个uint64_t类型的值写入…...

ESP32基础应用之使用手机浏览器作为客户端与ESP32作为服务器进行通信

文章目录 1 准备2 移植2.1 softAP工程移植到simple工程中2.2 移植注意事项 3 验证 1 准备 参考工程 Espressif\frameworks\esp-idf-v5.2.1\examples\wifi\getting_started\softAP softAP工程演示将ESP32作为AP&#xff0c;即热点&#xff0c;使手机等终端可以连接参考工程 Esp…...

【课后练习分享】Java用户注册界面设计和求三角形面积的图形界面程序

目录 java编程题&#xff08;每日一练&#xff09;&#xff1a; 问题一的答案代码如下&#xff1a; 问题一的运行截图如下&#xff1a; 问题二的答案代码如下&#xff1a; 问题二的运行截图如下&#xff1a; java编程题&#xff08;每日一练&#xff09;&#xff1a; 1.…...

三维空间坐标系变换(旋转平移)

在探究三维空间下的变换前&#xff0c;首先研究二位空间&#xff0c;因为比较直观&#xff0c;再推广到三维空间。 首先应该清楚的一点是&#xff1a;旋转、平移对于坐标系下的点以及坐标系本身而言都是相对的&#xff08;运动的相对性&#xff09;。 例如&#xff1a; X O Y …...

OC笔记之foundation框架

OC学习笔记&#xff08;三&#xff09; 文章目录 OC学习笔记&#xff08;三&#xff09;常用Foundation框架结构体NSRangeNSRange结构体的定义定义 NSRange 的方法打印Range的相关信息NSRange的实际运用查找子字符串返回NSRange结构体 NSPointNSRect NSStringNSString的创建NSS…...

Docker部署springboot包并联通MySQL

Docker部署jar 实现功能 部署springboot下发布的jar包不同docker容器之间通信&#xff08;如MySQL访问、Redis访问&#xff09;多个jar包部署 参考文献 Just a moment… Just a moment… https://www.jb51.net/article/279449.htm springboot配置 这里使用多yaml配置文件&…...

多帧激光点云基于标定参数进行融合拼接

1、前言 在三维视觉技术蓬勃发展的今天&#xff0c;点云作为捕获和表示三维环境的基础数据形式&#xff0c;扮演着至关重要的角色。点云融合拼接技术&#xff0c;作为连接孤立点云片段、构建连续、全面三维场景的核心过程&#xff0c;对于自动驾驶、机器人导航、三维建模以及地…...

python数据类型之字符串

目录 1.字符串概念和注意事项 2.字符串内置函数 3.字符串的索引、切片和遍历 4.字符串运算符 5.字符串常用方法 性质判断 开头结尾判断 是否存在某个子串 大小写等格式转化 子串替换 删除两端空白字符 格式化字符串 分割与合并 6.字符串模板 7.exec 函数 8.字符…...

Vue3实战笔记(38)—粒子特效终章

文章目录 前言一、怎样使用官方提供的特效二、海葵特效总结 前言 官方还有很多漂亮的特效&#xff0c;但是vue3只有一个demo&#xff0c;例如我前面实现的两个页面就耗费了一些时间&#xff0c;今天记录一下tsparticles官方内置的几个特效的使用方法&#xff0c;一般这几个就足…...

晶体振荡器

一、晶振与晶体区别 晶振是有源晶振的简称&#xff0c;又叫振荡器&#xff0c;英文名称是oscillator&#xff0c;内部有时钟电路&#xff0c;只需供电便可产生振荡信号&#xff1b;晶体是无源晶振的简称&#xff0c;也叫谐振器&#xff0c;英文名称是crystal&#xff0c;是无极…...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

(二)原型模式

原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...

在Ubuntu中设置开机自动运行(sudo)指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

ubuntu22.04 安装docker 和docker-compose

首先你要确保没有docker环境或者使用命令删掉docker sudo apt-get remove docker docker-engine docker.io containerd runc安装docker 更新软件环境 sudo apt update sudo apt upgrade下载docker依赖和GPG 密钥 # 依赖 apt-get install ca-certificates curl gnupg lsb-rel…...

针对药品仓库的效期管理问题,如何利用WMS系统“破局”

案例&#xff1a; 某医药分销企业&#xff0c;主要经营各类药品的批发与零售。由于药品的特殊性&#xff0c;效期管理至关重要&#xff0c;但该企业一直面临效期问题的困扰。在未使用WMS系统之前&#xff0c;其药品入库、存储、出库等环节的效期管理主要依赖人工记录与检查。库…...

WinUI3开发_使用mica效果

简介 Mica(云母)是Windows10/11上的一种现代化效果&#xff0c;是Windows10/11上所使用的Fluent Design(设计语言)里的一个效果&#xff0c;Windows10/11上所使用的Fluent Design皆旨在于打造一个人类、通用和真正感觉与 Windows 一样的设计。 WinUI3就是Windows10/11上的一个…...

Java严格模式withResolverStyle解析日期错误及解决方案

在Java中使用DateTimeFormatter并启用严格模式&#xff08;ResolverStyle.STRICT&#xff09;时&#xff0c;解析日期字符串"2025-06-01"报错的根本原因是&#xff1a;模式字符串中的年份格式yyyy被解释为YearOfEra&#xff08;纪元年份&#xff09;&#xff0c;而非…...