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

vue-virtual-scroll-list虚拟列表

当DOM中渲染的列表数据过多时,页面会非常卡顿,非常占用浏览器内存。可以使用虚拟列表来解决这个问题,即使有成百上千条数据,页面DOM元素始终控制在指定数量。

 

一、参考文档

https://www.npmjs.com/package/vue-virtual-scroll-list

二、引入

import VirtualList from 'vue-virtual-scroll-list'components: {'virtual-list': VirtualList
}<virtual-list:data-key="'productCode'":data-sources="productList":data-component="productItem":keeps="20"style="overflow-y: auto;"@scroll="(e) => watchScroll(e)"ref="scrollList":extra-props="{addCart}"
>

三、参数

参数描述

data-sources

数据列表[数组]

data-key

列表 key 值

data-component

列表子组件

keeps

渲染最大 DOM 数量

extra-props

额外参数,可传变量和方法

@scroll

监听滚动事件

四、注意

1、virtual-list 组件自身必须设置为滚动区域

style="overflow-y: auto;"

2、子组件引入由原 components 注册改为在 data 注册

import productItem from '@components/product/productItem';data() {return {productList: [{productCode: 1, productName...}, {...}, ...], // 数据列表productItem // 子组件}
}

3、子组件商品数据统一改为 source

props: {source: {type: Object,default() {return {};}}
}

4、子组件不再使用$emit方式与父组件交互,将父组件方法声明在extra-props中,子组件通过props接收,需要$emit 的时候使用 props 中接收的方法

props: {// 接收父组件方法addCart: {type: Function,default: () => {}}
}methods: {// 子组件点击加购按钮clickAddCart(item) {// 调用父组件加购方法this.addCart(item)}
}

5、回到顶部,虚拟列表不识别 scrollTop,使用虚拟列表特有的 scrollToIndex 或 scrollToOffset 方法回到顶部

this.$refs.scrollList.scrollToIndex(0);

相关文章:

vue-virtual-scroll-list虚拟列表

当DOM中渲染的列表数据过多时&#xff0c;页面会非常卡顿&#xff0c;非常占用浏览器内存。可以使用虚拟列表来解决这个问题&#xff0c;即使有成百上千条数据&#xff0c;页面DOM元素始终控制在指定数量。 一、参考文档 https://www.npmjs.com/package/vue-virtual-scroll-li…...

C++学习笔记(以供复习查阅)

视频链接 代码讲义 提取密码: 62bb 文章目录1、C基础1.1 C初识&#xff08;1&#xff09; 第一个C程序&#xff08;2&#xff09;注释&#xff08;3&#xff09;变量&#xff08;4&#xff09;常量&#xff08;5&#xff09;关键字&#xff08;6&#xff09;标识符命名规则1.2 …...

备份时间缩短为原来 1/4,西安交大云数据中心的软件定义存储实践

XEDP 统一数据平台为西安交通大学云平台业务提供可靠的备份空间和强大的容灾能力&#xff0c;同时确保数据安全。西安交通大学&#xff08;简称“西安交大”&#xff09;是我国最早兴办、享誉海内外的著名高等学府&#xff0c;是教育部直属重点大学。学校现有兴庆、雁塔、曲江和…...

我国近视眼的人数已经超过了六亿,国老花眼人数超过三亿人

眼镜是一种用于矫正视力问题、改善视力、减轻眼睛疲劳的光学器件&#xff0c;在我们的生活中不可忽略的一部分&#xff0c;那么我国眼镜市场发展情况是怎样了&#xff1f;下面小编通过可视化互动平台对我国眼镜市场的状况进行分析。我国是一个近视眼高发的国家&#xff0c;据统…...

设计模式(十八)----行为型模式之策略模式

1、概述 先看下面的图片&#xff0c;我们去旅游选择出行模式有很多种&#xff0c;可以骑自行车、可以坐汽车、可以坐火车、可以坐飞机。 作为一个程序猿&#xff0c;开发需要选择一款开发工具&#xff0c;当然可以进行代码开发的工具有很多&#xff0c;可以选择Idea进行开发&a…...

VUE3入门基础:input元素的type属性值说明

说明 在Vue 3中&#xff0c;<input>元素的type属性可以设置不同的类型&#xff0c;以适应不同的输入需求。 常见的type属性取值如下&#xff1a; text&#xff1a;默认值&#xff0c;用于输入文本。password&#xff1a;用于输入密码&#xff0c;输入内容会被隐藏。em…...

关于供应链,一文教你全面了解什么是供应链

什么是供应链&#xff1f;供应链是指产品生产和流通过程中所涉及的原材料供应商、生产商、分销商、零售商以及最终消费者等成员通过与上游、下游成员的连接 (linkage) 组成的网络结构。也即是由物料获取、物料加工、并将成品送到用户手中这一过程所涉及的企业和企业部门组成的一…...

Scope作用域简单记录分析

类型 singleton 单例作用域 prototype 原型作用域 request web作用域,请求作用域,生命周期跟request相同,请求开始bean被创建,请求结束bean被销毁 session web作用域,会话作用域,会话开始bean被创建,会话结束bean被销毁 application web作用域,应用程序作用域,应用程序创建…...

ChatGPT创作恋爱甜文

林欣是一个长相可爱、性格呆萌的小姑娘&#xff0c;她年纪轻轻就失去了父母&#xff0c;独自一人面对世界的冷漠和残酷。 虽然经历了这样的打击&#xff0c;但她并没有沉沦&#xff0c;反而更加努力地去生活。 她找到了一份服务员的工作&#xff0c;每天在餐厅里穿梭&#xf…...

贝叶斯优化及其python实现

贝叶斯优化是机器学习中一种常用的优化技术&#xff0c;其目的是在有限步数内寻找函数的最大值或最小值。它可以被视为在探索不同参数配置与观察这些配置结果之间寻求平衡点的过程。基本思想是将我们在过去的观察和体验&#xff0c;传递到下一个尝试中&#xff0c;从而在等待数…...

Lombok使用@Builder无法build父类属性

文章目录问题描述解决方案使用示例lombok Builder注解和build父类属性问题1、简介2.使用3、Builder注解对类做了什么&#xff1f;问题描述 实体类使用Lombok的Builder来实现Builder模式&#xff0c;但是如果使用了extend继承&#xff0c;则子类无法通过Builder来Build父类属性…...

Pixhawk RPi CM4 Baseboard 树莓派CM4安装Ubuntu20.04 server 配置ros mavros mavsdk

文章目录硬件安装Ubuntu Server20.04下载rpiboot工具下载imager刷写系统配置USB配置WIFI开机安装桌面配置wifi配置串口安装ROS安装mavros安装MAVSDK-PythonInternet设置最后参考&#xff1a; https://docs.holybro.com/autopilot/pixhawk-baseboards/pixhawk-rpi-cm4-baseboard…...

后端开发过程中的安全问题

安全问题是木桶效应&#xff0c;整个系统的安全等级取决于安全性最薄弱的那个模块。在写业务代码的时候&#xff0c;要从我做起&#xff0c;建立最基本的安全意识&#xff0c;从源头杜绝低级安全问题。 1、数据源头的安全处理 对于 HTTP 请求&#xff0c;我们要在脑子里有一个…...

基于Hyperledger Fabric的学位学历认证管理系统

基于Hyperledger Fabric的学位学历认证管理系统 项目源码&#xff1a;https://github.com/Pistachiout/Academic-Degree-BlockChain 一、选题背景 学历造假、认证造假等是一个全球日益普遍的现象&#xff0c;不仅对社会产生了巨大的负面影响&#xff0c;同时也极大增加了企业…...

jq条件判断验证,正则表达式

// 判断是否包含为至少8位及以上字符,大小写字母及特殊字符 jQuery.validator.addMethod("isPwd", function (value, element) { var pwdRegex new RegExp((?.*[0-9])(?.*[A-Z])(?.*[a-z])(?.*[^a-zA-Z0-9]).{8,30}); return this.optional(elemen…...

23.3.9打卡 AtCoder Beginner Contest 259

A题 题解 对于x特判一下就好 代码 void solve() {ll x,d;cin>>n>>m>>x>>t>>d;if(n>m){nmin(n,x);if(n<m){cout<<t;return;}cout<<(m-n)*dt;}else{mmin(m,x);cout<<(m-n)*dt;}return; }B 三角函数全还给高中老师了 题…...

JS - this指向

一 this 指向有哪几种 详细可见&#xff1a;https://juejin.cn/post/6844903805587619854 &#xff08;文章归类this指向为四大类&#xff09; https://www.jianshu.com/p/66eb9b21105d this是什么&#xff1f;this 就是一个指针&#xff0c;指向调用函数的对象。 1.默认绑定…...

低代码有哪些典型应用场景?

低代码有哪些典型应用场景&#xff1f; 低代码是一种全新的应用开发方式&#xff0c;它通过可视化的拖拽式界面&#xff0c;将传统的繁琐代码编写转化为简单的拖拽操作&#xff0c;让非技术人员也能够快速地开发出应用程序。 随着数字化转型的不断加速&#xff0c;低代码平台…...

Substrate 基础教程(Tutorials) -- 监控节点指标

Substrate 公开有关网络操作的度量。例如&#xff0c;您可以收集有关您的节点连接了多少个对等节点、您的节点使用了多少内存以及正在生成的块数量的信息。为了捕获和可视化Substrate节点公开的度量&#xff0c;您可以配置和使用Prometheus和Grafana等工具。本教程演示如何使用…...

lua table 详解

文章目录1.table 声明与访问2. table 的两种遍历方式 pairs 和 ipairs2.1 pairs2.2 ipairs2.3 例3.迭代器实现 ipairs 效果4.获取 table 长度4.1 #table 获取长度4.2 自定义函数获取 table 长度注意事项1.table 声明与访问 -- 初始化表 tbl {} -- 不可以是 tbl nil-- 赋值 -…...

网络编程(Modbus进阶)

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...