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

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

这里我使用的是RecycleScroller。

App.vue

<template>
 <RecycleScroller
     class="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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Vue框架动态引入省份个性化代码

项目需求有产品的功能&#xff0c;但是功能下部分小功能每个省份有不同的控制&#xff0c;所以需要引入省份个性化代码。 思路是&#xff0c;页面一开始加载产品化的代码&#xff0c;有个性化的代码就加载个性化的逻辑&#xff0c;个性化代码是产品化代码的重写&#xff0c;所…

网络协议——FTP(简介、搭建FTP服务端)

一、简介 1、什么是FTP&#xff1f; FTP&#xff08;File Transfer Protocol&#xff0c;文件传输协议&#xff09; TCP/IP 协议组的协议之一。常用20&#xff08;数据&#xff09;、21&#xff08;命令&#xff09;端口作为通讯端口。&#xff08;22为SSH端口&#xff09;F…

机器学习入门指南:Jupyter Notebook实战

前言 机器学习作为人工智能领域的核心组成&#xff0c;是计算机程序学习数据经验以优化自身算法、并产生相应的“智能化的“建议与决策的过程。随着大数据和 AI 的发展&#xff0c;越来越多的场景需要 AI 手段解决现实世界中的真实问题&#xff0c;并产生我们所需要的价值。 机…

引力为什么会让时间变慢,给你通俗的解读

爱因斯坦的狭义相对论表明&#xff0c;速度会让时间变慢&#xff0c;速度越快时间就越慢。而广义相对论告诉我们&#xff0c;引力同样会让时间变慢&#xff0c;引力越强时间就越慢。 时间膨胀 速度对时间的影响就先不解释了&#xff0c;之前的科普文章介绍了很多&#xff0c;今…

【C++】从零开始map与set的封装

送给大家一句话&#xff1a; 今日的事情&#xff0c;尽心、尽意、尽力去做了&#xff0c;无论成绩如何&#xff0c;都应该高高兴兴地上床恬睡。 – 三毛 《亲爱的三毛》 &#x1f303;&#x1f303;&#x1f303;&#x1f303;&#x1f303;&#x1f303;&#x1f303;&#x…

看潮成长日程表用户手册(下)

看潮成长日程表用户手册&#xff08;下&#xff09; 四、基础设置1、系统用户设置2、成长学员设置3、自然期间定义4、时间表版本设置5、学员期间设置6、时间表时段设置7、年度假日维护 五、参数设置1、颜色参数设置2、逻辑参数设置3、数值参数设置4、字符参数设置5、列表输入项…

【二分查找 位运算】3145. 大数组元素的乘积

本文涉及知识点 二分查找算法合集 位运算、状态压缩、枚举子集汇总 LeetCode3145. 大数组元素的乘积 一个整数 x 的 强数组 指的是满足和为 x 的二的幂的最短有序数组。比方说&#xff0c;11 的强数组为 [1, 2, 8] 。 我们将每一个正整数 i &#xff08;即1&#xff0c;2&am…

c语言从入门到函数速成(完结篇)

哈喽&#xff0c;小伙伴们大家好呀&#xff0c;本篇文章是这个系列的完结篇&#xff0c;希望大家看完后能有所收获哦 首先能看到这里的同学&#xff0c;一定也是自觉性比较强的了&#xff0c;我会在文章末尾给大家发点小福利 那么&#xff0c;我们先来通过数学中的函数来引入一…

医学中脑机接口技术的未来

医学中脑机接口技术的未来 李升伟 编译 对非侵入性脑机接口&#xff08;而不是植入物&#xff09;日益增长的兴趣可能会提高患者的易使用性&#xff0c;但分辨率需要提高。 图片来源&#xff1a;Denis Pobytov / DigitalVision Vectors / Getty 全球范围内正在展开一场争夺利用…

云服务器购买之后到部署项目的流程

1.通过账号密码登录百度智能云控制台; 2.进入对应的服务器‘云服务器BBC’ 找到’实例‘即找到对应的服务器列表; 此时通过本地电脑 1.cmd命令提示符 PING 服务器公网地址不通&#xff1b; 2.通过本地电脑进行远程桌面连接不通 原因&#xff1a;没有关联安全组&#xff0c;或者…

测试基础02:软件开发流程及模型、敏捷开发

1、软件开发流程 包括&#xff1a;项目开发目的分析与确定、需求分析、设计、编程、软件测试、软件交付、验收和维护。 2、软件开发模型 2.1 定义 软件开发模型(Software Development Model)是软件开发全过程的框架&#xff0c;规定了软件开发过程中各项活动的基本步骤、任务…

InteractiveGraph图谱中vue项目中如何使用

InteractiveGraph图谱中vue项目中如何使用 一、下载js和css和字体二、vue2.0项目中引用三、grap组件 一、下载js和css和字体 //在这里面找 https://github.com/grapheco/InteractiveGraph/blob/master/dist/examples/example1.html二、vue2.0项目中引用 //main.js中全局引入$ …

驱动开发中引入私有数据的原因

系列文章目录 驱动开发中引入私有数据的原因 驱动开发中引入私有数据的原因 系列文章目录驱动开发中引入私有数据的原因 驱动开发中引入私有数据的原因 驱动开发中引入私有数据&#xff08;Private Data&#xff09;概念主要是为了解决以下几个关键问题&#xff1a; 1.多设备支…

Docker环境安装并使用Elasticsearch

1、拉取es docker pull elasticsearch:7.10.12、查看镜像 docker images3、启动es docker run -d --name esearch -p 9200:9200 -p 9300:9300 elasticsearch:7.10.14、如果启动ES时出现一下问题 Unable to find image docker.elastic.co/elasticsearch/elasticsearch:7.10.…

从Python代码到pip包:打包Python项目

大家好&#xff0c;在软件开发的世界中&#xff0c;共享和重用代码是至关重要的。Python社区为我们提供了丰富的资源&#xff0c;使得我们能够轻松地与他人分享我们的工作&#xff0c;并从他人的工作中受益。将代码打包成pip包&#xff08;Python包管理器&#xff09;是一种常见…

SpringCloudAlibaba:6.2RocketMQ的普通消息的使用

简介 普通消息也叫并发消息&#xff0c;是发送效率最高&#xff0c;使用最多的一种 依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSch…

Web上机:JSP+Servlet+JDBC的交互流程

目录 需求与设计 基础需求&#xff1a; 项目结构&#xff1a; 项目逻辑&#xff1a; 运行图示&#xff1a; 代码实现 Login.jsp InsertServlet SelectServlet Table.jsp user mysql表结构 Web开发技术迭代速度日新月异&#xff0c;对于技术的更新往往是基于底层一…

Kubernetes核心组件Ingress详解

1.1 Ingress介绍 Kubernetes 集群中&#xff0c;服务&#xff08;Service&#xff09;是一种抽象&#xff0c;它定义了一种访问 Pod 的方式&#xff0c;无论这些 Pod 如何变化&#xff0c;服务都保持不变。服务可以被映射到一个静态的 IP 地址&#xff08;ClusterIP&#xff09…

element ui 的el-input输入一个字后失去焦点,需重新点击输入框才能再次输入!

解决方案&#xff1a; 我是form表单嵌套表格&#xff0c;里面的el-input输入框&#xff0c;输入第一个值的时候会突然失去焦点&#xff0c;需要再次点击输入框才能正常输入&#xff0c;原因是table的key值&#xff0c;需要改成正常的index即可&#xff0c;如果你是循环的&…

精益生产培训公司:为企业量身定制的精益解决方案——张驰咨询

在当今竞争激烈的市场环境下&#xff0c;企业要想持续发展&#xff0c;就必须不断寻求转型升级的途径。精益生产作为一种高效的生产管理方式&#xff0c;已经成为众多企业追求的目标。而精益生产培训公司&#xff0c;正是帮助企业实现这一目标的重要力量。 一、精益生产培训的…