项目中数据量有时候过于庞大,使用elementui的Select组件时,会导致下拉框加载速度慢卡顿甚至于卡死,为解决这个问题,使用vue-virtual-scroll-list插件 ,模拟虚拟滚动。 vue-virtual-scroll-list是vue的一个虚拟滚动组件,通过不渲染可视区域以外的内容,显示虚拟的滚动条来提升页面性能 首先看 安装 npm install vue-virtual...
在Vue 3中使用虚拟列表(virtual-list)是一个优化长列表渲染性能的有效方法。下面我将根据你的提示,分点解答如何在Vue 3项目中使用virtual-list。 1. 理解virtual-list的基本概念与用途 虚拟列表(Virtual List)是一种技术,它只渲染当前视口(viewport)内的元素,而非整个列表。这样可以显著减少DOM节点的数量,提高渲染...
在Vue 中使用useVirtualList时,直接修改列表项的状态并随后从列表中删除该项可能会导致渲染问题,因为虚拟列表依赖于一个静态的数组索引来渲染元素。当你删除一个元素时,后续元素的索引会发生变化,这可能会导致渲染或状态更新上的不一致。 为了解决这个问题,你可以采取以下步骤: 更新状态前先复制数据:在修改数据之前,先...
import{createVirtualScroller}from'vue-typed-virtual-list';constVirtualScroller=createVirtualScroller<User>();typeUser={id:number;name:string;phone:string;};constsomeArrayOfUsers:User[]=Array.from(Array(100)).map((_,i)=>({id:i+1,name:'Name',phone:'Phone'})); Props defaultSize- Placeholder...
import virtualList from 'vue-virtual-scroll-list' components:{ 'virtual-list': virtualList }, 基础用法 属性说明 data-key=“selectData.value” 就是绑定的唯一key值,可传入动态的 data-sources=“selectArr” 下拉框的数组 data-component=“itemComponent” 就是抽离中的el-option组件 keeps=“20” 渲...
npm install vue3-base-virtual-list 参数 exportinterfaceProps{// 列表list:any[]// container 样式containerStyle?:style// container classcontainerClassName?:string// child 样式childStyle?:style// child classchildClassName?:string// 高度height:number// 列表子项预估高度itemHeight:number// 滚动至底部的...
Vue.js 学习笔记 - 虚拟列表(Virtual-Scroll-List)心得 虚拟列表 背景 手上有个字幕编辑器的项目,因为长视频也许会有几千条字幕,所以字幕编辑器的列表中就会有几千条列表项。 但是如果将这几千条列表项全部渲染在 DOM 中,就会造成浏览器轻则卡顿,重则卡死,根本无法正常使用。 针对这种情况,我通过 Google 了解...
vue-virtual-scroller-list虚拟滚动 一个虚拟滚动组件,用来处理非常长的或者无限滚动的列表。 通过不渲染可视区域以外的内容,显示虚拟的滚动条来 将可视区域范围内的条目渲染出来,用户滚动,会处理滚动行为(虚拟的滚动条),动态重新执行更新渲染。dom复用,不需要消耗太多资源,滚动时,cpu换内存,提升页面性能 ...
yarn add vue-virtual-list-observer Advantages Only 3 required props, simple and very easy to use. intersectionObserver efficient and resolve Fast scrolling in a white screen. Highly customizable and has a live demo to get started quickly
name:'VirtualList', props: { // 列表数据 listData:{ type:Array, default:()=>[] }, // 列表项高度 itemHeight: { type: Number, default:200 } }, computed:{ // 列表总长度(列表项高度 * 列表项总数) listHeight(){ return this.listData.length * this.itemHeight; ...