项目中数据量有时候过于庞大,使用elementui的Select组件时,会导致下拉框加载速度慢卡顿甚至于卡死,为解决这个问题,使用vue-virtual-scroll-list插件 ,模拟虚拟滚动。 vue-virtual-scroll-list是vue的一个虚拟滚动组件,通过不渲染可视区域以外的内容,显示虚拟的滚动条来提升页面性能 首先看 安装 npm install vue-v
Vue.js 学习笔记 - 虚拟列表(Virtual-Scroll-List)心得 虚拟列表 背景 手上有个字幕编辑器的项目,因为长视频也许会有几千条字幕,所以字幕编辑器的列表中就会有几千条列表项。 但是如果将这几千条列表项全部渲染在 DOM 中,就会造成浏览器轻则卡顿,重则卡死,根本无法正常使用。 针对这种情况,我通过 Google 了解...
项目中数据量有时候过于庞大,使用elementui的Select组件时,会导致下拉框加载速度慢卡顿甚至于卡死,为解决这个问题,使用vue-virtual-scroll-list插件,模拟虚拟滚动。 vue-virtual-scroll-list是vue的一个虚拟滚动组件,通过不渲染可视区域以外的内容,显示虚拟的滚动条来提升页面性能 首先看效果 安装 npm install vue-virtu...
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"/> </template>importItemfrom'./Item'importVirtualListfrom'vue-virtual-scroll...
npm install vue-virtual-scroll-list 页面使用 <template><virtual-liststyle="height: 300px; overflow-y: auto"class="virtual-list":data-key="'id'":data-sources="goodsList":data-component="itemComponent":extra-props="{ itemClick: itemClick, current...
npm install vue-virtual-scroll-list --save Root component: <template> <virtual-list style="height: 360px; overflow-y: auto;" // make list scrollable :data-key="'uid'" :data-sources="items" :data-component="itemComponent" /> </template> import Item from './Item' import Virtual...
简介: Vue中 引入使用 vue-virtual-scroll-list 通过虚拟列表滚动加载,解决数据量过多时 页面卡顿、体验差的问题 1. 简介 vue-virtual-scroll-list npm 地址 vue-virtual-scroll-list 主页 安装 npm i vue-virtual-scroll-list 对比 通过v-for 渲染 10000 个节点,当页面展示94~100区间内的数据时,我们发现浏览...
el-select 结合 vue-virtual-scroll-list 可以显著提升大数据量下拉框的性能。 在Vue 项目中,当 el-select 组件需要处理大量数据时,直接使用会导致性能问题,如下拉框加载速度慢、卡顿甚至卡死。为了解决这个问题,可以使用 vue-virtual-scroll-list 插件来实现虚拟滚动。 1. 安装 vue-virtual-scroll-list 首先,你需...
https://tangbc.github.io/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...
优化背景:如果你的应用存在非常长的或者无限滚动的列表,那么需要采用窗口化的技术来优化性能,只需要渲染少部分的内容(可视区域),减少重新渲染组件和创建dom节点的时间,可以参考以下的开源项目vue-vitual-scoll -list 和vue-virtual-scroller ,来优化这种无限列表的场景; 参考文档:https://www.npmjs.com/package/vue-...