项目中数据量有时候过于庞大,使用elementui的Select组件时,会导致下拉框加载速度慢卡顿甚至于卡死,为解决这个问题,使用vue-virtual-scroll-list插件 ,模拟虚拟滚动。 vue-virtual-scroll-list是vue的一个虚拟滚动组件,通过不渲染可视区域以外的内容,显示虚拟的滚动条来提升页面性能 首先看 安装 npm install vue-v
Vue.js 学习笔记 - 虚拟列表(Virtual-Scroll-List)心得 虚拟列表 背景 手上有个字幕编辑器的项目,因为长视频也许会有几千条字幕,所以字幕编辑器的列表中就会有几千条列表项。 但是如果将这几千条列表项全部渲染在 DOM 中,就会造成浏览器轻则卡顿,重则卡死,根本无法正常使用。 针对这种情况,我通过 Google 了解...
vuescroll插件文档 先说原因:大概率是因为滚动事件并不是在你@scroll的div上发生的,而是发生在document上在网上看了一下vue中监听滚动条滚动事件,清一色的使用document.addEventListener('scroll',function(){})我是在做滚动条滑到底部时,自动加载更多的时候有这个需求。我认为使用document.addEventListener会破坏vue的统...
1. 理解vue-virtual-scroll-list的基本概念和功能 vue-virtual-scroll-list是一个用于Vue.js的虚拟滚动组件,旨在处理大量数据渲染时的性能问题。它通过只渲染视口(viewport)内的数据项,而不是整个列表,从而显著提高页面性能。这对于处理长列表或表格等大量数据的场景特别有用。 2. 安装并引入vue-virtual-scroll-list...
https://codesandbox.io/s/live-demo-virtual-list-e1ww1 Simple usage npm install vue-virtual-scroll-list --save Root component: <template> <virtual-liststyle="height: 360px; overflow-y: auto;"//makelistscrollable:data-key="'uid'":data-sources="items":data-component="itemComponent"/> ...
项目中数据量有时候过于庞大,使用elementui的Select组件时,会导致下拉框加载速度慢卡顿甚至于卡死,为解决这个问题,使用vue-virtual-scroll-list插件,模拟虚拟滚动。 vue-virtual-scroll-list是vue的一个虚拟滚动组件,通过不渲染可视区域以外的内容,显示虚拟的滚动条来提升页面性能 首先看效果 安装 npm install vue-virtu...
建一个新的文件夹,在这个文件夹中创建一个vue2的项目:vue create vue2-virtual-scroll,模板选择默认的vue2模板即可; 在components目录下创建一个List.vue组件,用来进行虚拟列表的展示; 在App.vue主入口页面中去引入该组件: 1<template>23<List4:items="items"5:size="60"6:shownumber="10"7/>89</templat...
npm install --save vue-virtual-scroll-list@1.1.3 1. 使用 在单页面中导入 import VirtualList from "vue-virtual-scroll-list"; 1. components: { VirtualList,//注册组件 }, 1. 2. 3. <!-- size代表行高 remain代表一次渲染的数量 --> <!-- 出现的问题:1.在时间视图时(文件...
dynamic-virtual-list是列表的容器，绑定了滚动事件handleScroll。占位层的高度为总高度，用于模拟整个列表...
data-component:循环的内容,这里由VirtualItem.vue extra-prop:其他要传入循环内容的props --></template>importVirtualListfrom"vue-virtual-scroll-list";importVirtualItemfrom"./VirtualItem";exportdefault{name:"",components: {VirtualList, },data(