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

vue3使用vue-virtual-scroller虚拟滚动遇到的问题

安装和使用

见官方文档:https://github.com/Akryum/vue-virtual-scroller/tree/master/packages/vue-virtual-scroller

如何获取子组件的实例

  1. 背景

    本来正常情况下,要获取v-for渲染的子组件的实例,通过ref绑定即可获取到数组,并通过index即可定位到vue实例

    <template><RecycleScrollerclass="scroller":items="list":item-size="32"key-field="id"v-slot="{ item }"><Info ref="info">{{ item.name }}</Info></RecycleScroller>
    </template>
    

    但是由于这里使用的是虚拟列表,info.value打印出来的结果只是渲染出来的第一个实例

  2. 解决方案

    发现,通过为每一个组件绑定不同的ref,通过这多个ref能够获取到每一个实例,比如info0.valueinfo1.value

    那么,就只需要根据list动态的创建多个ref,优化方案,多个ref放到数组中,通过index访问

    <RecycleScrollerclass="scroller"ref="scroller":items="arr":item-size="145":buffer="400"key-field="itemCode"v-slot="{ item, index }"
    ><OutInfo:ref="outInfoRefs[index]"/>
    </RecycleScroller>//子组件的实例(这里通过数组来进行存储,每一个实例存储一个)
    const outInfoRefs: any = [];
    arr.value.forEach(item => outInfoRefs.push(ref()));
    

    这样打印出来的outInfoRefs将会是多个ref实例

    注意:这里打印出来的并没有所有的,只有视口上展示出来的加上不可见的预加载的几个

    比如是这样的:[null, null, null, ref(), ref(), ref(), ref(), null, null, null]

如何保存不在视口区域内的子组件的状态

  1. 背景

    如果你在子组件的onMounted中输出日志的话,会发现,只有一开始加载的几个元素会输出,后面为了提高效率只是重复渲染这已经加载的几个元素而已

    那么问题来了:实际上不同的子组件里面的状态是不一样的,传递进去的props是会获取到的,但是自己维护的是不变的

    比如每个子组件有一个input,你在第一个输入了一个hello,假定你重复渲染的子组件是5个,那么在第6个子组件渲染的时候,你会惊奇的发现他已经变成了hello,这显然不是我们需要的结果

  2. 解决方案

    前面说过,props是会正常获取到的,那么通过watchprops的变化,比如传递一个index

    然后在这个watch中根据需要,去初始化组件状态,那么就可以实现

    watch(() => props.index,(newVal) => {// 由于使用的是虚拟滚动,每个子元素是复用的,css样式会保留,通过监听index的变化,来达到重新渲染每个子元素的效果if (props.focusIndex === newVal) {// 如果当前子元素是选中的,那么需要进行一些操作} else {// 如果当前子元素不是选中的,那么需要进行另一些操作doBlur(1);delColor();editIsDisabled();}}
    );
    
  3. 另一个问题(赋初值,保存变化值)

    假定第一个元素的input已经赋值了hello,如果通过上面的代码的话,那么第6个已经正常置空了

    但是回去到第1个时候,会发现也被置空了,但是并不能通过props获取到刚才的改变,因为没有保存

    因为子元素无法保存,但是对应的数据是可以保存的,比如添加一个属性tempValue,在change的时候,通过props进行改变,然后在watch的时候赋值上去,这样是可行的

相关文章:

vue3使用vue-virtual-scroller虚拟滚动遇到的问题

安装和使用 见官方文档&#xff1a;https://github.com/Akryum/vue-virtual-scroller/tree/master/packages/vue-virtual-scroller 如何获取子组件的实例 背景 本来正常情况下&#xff0c;要获取v-for渲染的子组件的实例&#xff0c;通过ref绑定即可获取到数组&#xff0c;并…...

c#用Gnuplot画图源码

直接调用这个类即可&#xff0c;需要下载个GnuPlot安装下。 // Author: Leonardo Tazziniusing System; using System.Diagnostics; using System.Drawing; using System.IO; using System.Windows.Forms;/// <summary> /// Tested with Gnuplot 5.2 /// </summary&g…...

【前端设计模式】之工厂模式

工厂模式特性 工厂模式是一种创建对象的设计模式&#xff0c;它通过使用工厂类来封装对象的创建逻辑&#xff0c;隐藏了具体对象的实例化过程。工厂模式的主要特性包括&#xff1a; 封装对象的创建过程&#xff1a;工厂模式将对象的创建过程封装在一个工厂类中&#xff0c;客…...

Hive 的函数介绍

目录 ​编辑 一、内置运算符 1.1 关系运算符 1.2算术运算符 1.3逻辑运算符 1.4复杂类型函数 1.5对复杂类型函数操作 二、内置函数 2.1数学函数 2.2收集函数 2.3类型转换函数 2.4日期函数 2.5条件函数 2.6字符函数 三、内置的聚合函数 四、内置表生成函数 五、…...

【Linux基础】第31讲 Linux用户和用户组权限控制命令(三)

用户组管理命令 每个用户都有一个用户组&#xff0c;系统可以对一个用户组中的所有用户进行集中管理。不同Linux系统对用户组的规定有所不同。如Linux下的用户属于与它同名的用户组&#xff0c;这个用户组在创建用户时同时创建。用户组的管理涉及用户组的添加、删除和修改。组…...

html form表单高级用法

场景&#xff1a;想单纯使用表单内置的api完成提交&#xff0c;不使用js代码 代码如下&#xff1a; <form name"myForm" action"http://localhost:13734/form" method"post"><label>用户名<input type"text" name&qu…...

openssl升级

参考 https://www.cnblogs.com/shareHistory/p/15850707.html 下载并安装依赖 wget https://www.openssl.org/source/openssl-3.0.5.tar.gz yum -y install perl-IPC-Cmd编译安装 ./config -Wl,-rpath/usr/local/openssl/lib -fPIC --prefix/usr/local/openssl --openssldir…...

【数据结构】图的遍历:广度优先(BFS),深度优先(DFS)

目录 1、广度优先&#xff08;BFS&#xff09; 算法思想 广度优先生成树 知识树 代码实现 2、深度优先&#xff08;DFS&#xff09; 算法思想 深度优先生成树 知识树 代码实现 1、广度优先&#xff08;BFS&#xff09; 算法思想 图的广度优先遍历&#xff0…...

Mysql 学习总结(89)—— Mysql 库表容量统计

前言 统计每个库每个表的大小是数据治理中最简单的一个要求,下面从抽样统计结果及精确统计结果两方面来统计MySQL的每个库每个表的数据量情况。mysql 数据字典库 information_schema 里记录了统计的预估数据量(innodb 引擎表不准确,MyISAM 引擎表准确)及数据大小、索引大小及…...

virtualBox安装配置使用

virtualBox下载 //官网下载地址 https://www.virtualbox.org/wiki/Downloads ​ //ubuntu下载地址 https://cn.ubuntu.com/download/server/step1 virtualBox使用 导入现有镜像 &#xff08;如果报错可以降低系统配置&#xff0c;因为有些主机可能不支持高配置&#xff0c;例如…...

北斗导航 | RTD、RTK完好性之B值、VPL与HPL计算(附B值计算matlab源代码)

===================================================== github:https://github.com/MichaelBeechan CSDN:https://blog.csdn.net/u011344545 ===================================================== 1、S矩阵获取 为第i颗卫星测距标准差:...

more often than not 的含义

今天听https://www.bilibili.com/video/BV1w94y12727/?p2&spm_id_frompageDriver more often than not 连读:mor ofen than au 想了半天不动什么意思. 查了一下表示大部分情况下. 还是不理解为什么, 就查了必应里面的词典. 表示超过一半的情况下. 又自己想了想突然懂了.…...

【Linux】Linux环境配置安装

目录 一、双系统&#xff08;特别不推荐&#xff09; 安装双系统的缺点&#xff1a; 安装双系统优点&#xff08;仅限老手&#xff09;&#xff1a; 二、虚拟机centos7镜像&#xff08;较为推荐推荐&#xff09; 虚拟机的优点&#xff1a; 虚拟机的缺点&#xff1a; ​ …...

从零学习开发一个RISC-V操作系统(二)丨GCC编译器和ELF格式

本篇文章的内容 一、GCC&#xff08;GUN Compiler Collection&#xff09;1.1 GCC的命令格式1.2 GCC的主要执行步骤1.3 GCC涉及的文件类型 二、ELF简介2.1 ELF文件格式图2.2 ELF文件处理的相关工具2.3 练习 本系列是博主参考B站课程学习开发一个RISC-V的操作系统的学习笔记&…...

论文阅读_大语言模型_Llama2

英文名称: Llama 2: Open Foundation and Fine-Tuned Chat Models 中文名称: Llama 2&#xff1a;开源的基础模型和微调的聊天模型 文章: http://arxiv.org/abs/2307.09288 代码: https://github.com/facebookresearch/llama 作者: Hugo Touvron 日期: 2023-07-19 引用次数: 11…...

当量因子法、InVEST、SolVES模型等多技术融合在生态系统服务功能社会价值评估中的应用及论文写作、拓展分析

生态系统服务是人类从自然界中获得的直接或间接惠益&#xff0c;可分为供给服务、文化服务、调节服务和支持服务4类&#xff0c;对提升人类福祉具有重大意义&#xff0c;且被视为连接社会与生态系统的桥梁。自从启动千年生态系统评估项目&#xff08;Millennium Ecosystem Asse…...

k8s Limits 限制内存

Limits 限制内存 在 Kubernetes (K8s) 中&#xff0c;可以使用 Limits&#xff08;资源限制&#xff09;来限制 Pod&#xff08;容器&#xff09;使用的内存数量。此处的 Limits 表示 Pod 在 K8s 集群中可用的最大内存量。一旦 Pod 内存使用超过这个限制&#xff0c;可能会触发…...

单片机第三季-第三课:STM32开发板原理图、配置、浮点运算单元

目录 1&#xff0c;开发板原理图 2&#xff0c;浮点运算单元&#xff08;FPU&#xff09; 1&#xff0c;开发板原理图 课程视频比较早&#xff0c;介绍了三款开发板。观看视频时用的开发板说和51单片机共板的STM32核心板&#xff0c;将51单片机从底座拆下来后&#xff0c;安…...

观察者模式 发布-订阅模式(设计模式与开发实践 P8)

文章目录 观察者模式运用实现 观察者模式 定义&#xff1a;他用来定义对象之间一种一对多的依赖关系&#xff0c;当一个对象状态发生改变时&#xff0c;所有依赖他的对象都会得到通知 运用 如果我们使用过 DOM 上的事件函数&#xff0c;那就接触过观察者模式 document.body…...

【日常业务开发】Java实现异步编程

【日常业务开发】Java实现异步编程 Java实现异步编程什么是异步异步的八种实现方式异步编程线程异步Future异步CompletableFuture实现异步Spring的Async异步Spring ApplicationEvent事件实现异步消息队列ThreadUtil异步工具类Guava异步 CompletableFuture异步编排工具类创建异步…...

学习笔记|模数转换器|ADC原理|STC32G单片机视频开发教程(冲哥)|第十七集:ADC采集

文章目录 1.模数转换器&#xff08;ADC&#xff09;是什么&#xff1f;手册说明&#xff1a; 2.STC32G单片机ADC使用原理19.1.1 ADC控制寄存器&#xff08;ADC_CONTR)19.1.2 ADC配置寄存器&#xff08;ADCCFG)19.1.4ADC时序控制寄存器&#xff08;ADCTIM&#xff09;19.3 ADC相…...

OpenCV实现“蓝线挑战“特效

原理 算法原理可以分为三个流程&#xff1a; 1、将视频&#xff08;图像&#xff09;从&#xff08;顶->底&#xff09;或&#xff08;左->右&#xff09;逐行&#xff08;列&#xff09;扫描图像。 2、将扫描完成的行&#xff08;列&#xff09;像素重新生成定格图像…...

容器管理工具 Docker生态架构及部署

目录 一、Docker生态架构 1.1 Docker Containers Are Everywhere 1.2 生态架构 1.2.1 Docker Host 1.2.2 Docker daemon 1.2.3 Registry 1.2.4 Docker client 1.2.5 Image 1.2.6 Container 1.2.7 Docker Dashboard 1.3 Docker版本 二、Docker部署 2.1 使用YUM源部署…...

js判断数据类型的方法

简单数据类型用&#xff1a;typeof&#xff0c; // 可以直接typeof空格接数据的方式,也可以typeof(数据)的方式使用 console.log(typeof ""); //string(检验字符串没问题) console.log(typeof 1); //number(检验数字没问题) console.log(typ…...

达梦数据库随系统开机自动启动脚本

写一个脚本&#xff0c;实现在服务器开机后自动启动达梦数据库的功能。 1. 在/etc/init.d/目录下&#xff0c;编写脚本&#xff0c;并将脚本命名为startdm.sh。脚本内容实现如下&#xff1a; #!/bin/bash #chkconfig:2345 80 90 #decription:启动达梦# 切换到 dmdba 用户 su …...

Python开发利器之VS Code

Python官方提供了一个Python集成开发环境&#xff08;IDE&#xff09;&#xff1a; IDLE (Integrated Development and Learning Environment)。 它提供了一个图形用户界面&#xff0c;可以让开发者编写、调试和执行Python程序。IDLE包含Python解释器、代码编辑器、调试器和文件…...

【Axure视频教程】输入框控制滑动评分条

今天教大家在Axure里如何制作输入框控制滑动评分条的原型模板&#xff0c;可以通过鼠标左右拖动滑块&#xff0c;也可以点击条形让滑块移动到指定位置&#xff0c;标签和输入框里会返回具体的分值&#xff0c;分值由滑块所在的位置动态计算而成&#xff1b;也可以在输入框里输入…...

【学习笔记】[AGC064C] Erase and Divide Game

有点难&#x1f605;&#xff0c;看到比自己低一级的选手场切这道题就更绷不住了&#x1f607; 考虑 从低到高位 建立 trie \text{trie} trie 树&#xff0c;但是因为是对反串建立的&#xff0c;所以编号连续的点在 trie \text{trie} trie 树上的位置是分散的&#x1f605; …...

算法通关村-----数组中元素出现次数问题

数组中出现次数超过一半的数字 问题描述 数组中有一个数字出现的次数超过数组长度的一半&#xff0c;请找出这个数字。你可以假设数组是非空的&#xff0c;并且给定的数组总是存在多数元素。详见剑指offer39 问题分析 最直接的方式就是使用hashMap,遍历给定数组&#xff0c…...

Qt-键盘消息的传递-键盘消息的获取-C++

文章目录 1.概述2.焦点3.强制获取键盘消息4.键盘常用组合方法5.总结 1.概述 QKeyEvent 类用来描述一个键盘事件。当键盘按键被按下或者被释放时&#xff0c;键盘事件便会被发送给拥有键盘输人焦点的部件。 QKeyEvent 的 key() 函数可以获取具体的按键&#xff0c;对于 Qt 中给…...

温江建设局备案网站/如何进行搜索引擎优化 简答案

cdn引入(正常) 通过cdn方式引入是不会报错的。 src引入&#xff08;报错&#xff09; 然后我用npm下载了bootstrap和jquery&#xff0c;使用src方式引入居然报错了。 原因 当引入jQuery和bootstrap文件时会报错的原因是&#xff1a;electron 的 Renderer 端因为注入了 No…...

成都个人做网站/在线咨询 1 网站宣传

展开全部s.peek() 表示的是查看堆栈顶部的对象&#xff0c;但不从堆栈中移除它。除此之外&#xff1a;e69da5e887aa62616964757a686964616f31333337623430push(E item) 表示的是把项压入堆栈顶部。pop() 表示的是移除堆栈顶部的对象&#xff0c;并作为此函数的值返回该对象。em…...

沈阳网站建站公司/环球网

Windows10上安装了 kafka 和 zookeeper &#xff0c;用于日常开发。 以前用就没有什么问题&#xff0c;今天连接的时候&#xff0c;kafka启动就闪退&#xff0c;zookeeper 上还输出了一行信息 远程主机强迫关闭了一个现有的连接 估计是先前用的时候&#xff0c;异常关闭导致…...

基金从业培训网站/陕西网络推广公司

网上有很多PHP.INI文件配置的中文说明&#xff0c;但是对于PHP初学者来说在进行PHP运行环境搭建配置时还是容易一头雾水&#xff0c;今天换一种角度来分享如何进行php.ini配置&#xff0c;以求达到解决实际问题的效果&#xff0c;开篇以PHP教程方式详细介绍如何通过php.ini来配…...

wordpress 整站转移/网络营销渠道可分为

背景服务器的某个模块的进程莫名其妙的不见了&#xff0c;查看MQ的连接情况&#xff0c;该模块的连接数直接为0&#xff0c;但是其他模块的进程还存在。很是纳闷该模块的进程为什么进程突然不见了。查看进程的log文件&#xff0c;没有发现有stop信号收到。平时停止会收到kill信…...

平面设计线/北京seo运营推广

5319. 删除回文子序列 题目描述 给你一个字符串 s&#xff0c;它仅由字母 a 和 b 组成。每一次删除操作都可以从 s 中删除一个回文 子序列。 返回删除给定字符串中所有字符&#xff08;字符串为空&#xff09;的最小删除次数。 「子序列」定义&#xff1a;如果一个字符串可…...