项目中数据量有时候过于庞大,使用elementui的Select组件时,会导致下拉框加载速度慢卡顿甚至于卡死,为解决这个问题,使用vue-virtual-scroll-list插件 ,模拟虚拟滚动。 vue-virtual-scroll-list是vue的一个虚拟滚动组件,通过不渲染可视区域以外的内容,显示虚拟的滚动条来提升页面性能 首先看 安装 npm install vue-virtual...
在Vue 3中使用vue-virtual-scroll-list组件,可以显著提高渲染大量数据的性能。以下是详细步骤,包括安装、引入、配置、使用以及测试: 1. 安装vue-virtual-scroll-list库 首先,你需要在你的Vue 3项目中安装vue-virtual-scroll-list库。可以通过npm或yarn进行安装: bash npm install vue-virtual-scroll-list 或者 bas...
项目中数据量有时候过于庞大,使用elementui的Select组件时,会导致下拉框加载速度慢卡顿甚至于卡死,为解决这个问题,使用vue-virtual-scroll-list插件,模拟虚拟滚动。 vue-virtual-scroll-list是vue的一个虚拟滚动组件,通过不渲染可视区域以外的内容,显示虚拟的滚动条来提升页面性能 首先看效果 安装 npm install vue-virtu...
Vue.js 学习笔记 - 虚拟列表(Virtual-Scroll-List)心得 虚拟列表 背景 手上有个字幕编辑器的项目,因为长视频也许会有几千条字幕,所以字幕编辑器的列表中就会有几千条列表项。 但是如果将这几千条列表项全部渲染在 DOM 中,就会造成浏览器轻则卡顿,重则卡死,根本无法正常使用。 针对这种情况,我通过 Google 了解...
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-liststyle="height: 360px; overflow-y: auto;"//makelistscrollable:data-key="'uid'":data-sources="items":data-component="itemComponent"/> </template>importItemfrom'./Item'importVirtualListfrom'vue-virtual-scroll...
虚拟滚动是一种优化性能的技术,可以在处理大量数据时提高页面的加载速度和流畅度。在Vue中实现虚拟滚动效果,你可以使用一些开源的组件库,如vue-virtual-scroller或vue-virtual-scroll-list。这些组件库提供了易于使用的指令或组件来实现虚拟滚动效果。你只需将原有的滚动容器替换为这些组件,然后配置相应的参数即可。
scrollToOffsetscroll to pxpx getItemSize获取指定item尺寸index getItemPosByIndex获取指定item的位置信息: { top: number; current: number; bottom: number;}index forceUpdate强制更新- Readme Keywords none Install npm i@yinta/yt-virtual-scroll-list-vue3 ...
Vue-virtual-scroll-list首先需要将所有需要展示的数据加载到组件中,这些数据可以通过Ajax请求从后端获取,也可以在组件初始化时直接传入。通常情况下,这些数据会按照一定的顺序排列成一个数组。 2. 滚动事件监听 Vue-virtual-scroll-list组件会监听滚动事件,当用户滚动到列表底部时,触发滚动到达底部的事件。此时,组件会...
1.安装 cnpm/npm install vue-virtual-scroll-list --save 2.引入下载好的组件,并注册组件 import virtualList from 'vue-virtual-scroll-list' 3.注意版本1.x和2.x使用方式不同、api也不同 使用方式: <template><virtual-liststyle="height: 360px; overflow-y: auto;":data-key="'id'":data-sources...