项目中数据量有时候过于庞大,使用elementui的Select组件时,会导致下拉框加载速度慢卡顿甚至于卡死,为解决这个问题,使用vue-virtual-scroll-list插件 ,模拟虚拟滚动。 vue-virtual-scroll-list是vue的一个虚拟滚动组件,通过不渲染可视区域以外的内容,显示虚拟的滚动条来提升页面性能 首先看 安装 npm install vue-virtual...
1. 理解vue-virtual-scroll-list的基本概念和功能 vue-virtual-scroll-list是一个用于Vue.js的虚拟滚动组件,旨在处理大量数据渲染时的性能问题。它通过只渲染视口(viewport)内的数据项,而不是整个列表,从而显著提高页面性能。这对于处理长列表或表格等大量数据的场景特别有用。 2. 安装并引入vue-virtual-scroll-list...
所以大大节省了系统资源,提升了用户体验。 我在GitHub上找了几个基于Vue.js 的虚拟列表实现,最终找到了一个最合适的vue-virtual-scroll-list,并在项目中进行了使用。 我在闲暇之余研读了一下此项目的代码,发现实现方式比想象中还要简单。 核心实现 this.$slots.default类型为数组,存储的是此组件两标签中的内容,在...
建一个新的文件夹,在这个文件夹中创建一个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...
npmivue-virtual-scroll-list 1. 对比 通过v-for 渲染 10000 个节点,当页面展示94~100区间内的数据时,我们发现浏览器实际将 10000 条数据全部渲染出来了,这很容易导致页面卡顿。 通过vue-virtual-scroll-list 渲染 10000 个节点,当页面展示94~100区间内的数据时,我们发现浏览器实际只渲染了展示数据前后的91-110...
项目中数据量有时候过于庞大,使用elementui的Select组件时,会导致下拉框加载速度慢卡顿甚至于卡死,为解决这个问题,使用 vue-virtual-scroll-list插件 ,模拟虚拟滚动。vue-virtual-scroll-list是vue的一个虚拟…
优化无限列表性能vue-virtual-scroll-list【测试90w条数据】,优化背景:如果你的应用存在非常长的或者无限滚动的列表,那么需要采用窗口化的技术来优
在项目中有一个sku表(是一个尺码和颜色乘积的表格),假如有10个颜色,20个尺码,那这个sku表就会有200行。有一个客户有100个颜色的需求,100个颜色的时候如果有5个尺码,就会有500行,这样会使页面很卡,于是找到了vue-virtual-scroll-list这个插件。
Vue-virtual-scroll-list基于虚拟滚动技术,结合Vue.js框架,提供了一个简单易用的虚拟滚动列表组件。 二、原理 1. 初始化数据 Vue-virtual-scroll-list首先需要将所有需要展示的数据加载到组件中,这些数据可以通过Ajax请求从后端获取,也可以在组件初始化时直接传入。通常情况下,这些数据会按照一定的顺序排列成一个数组...
vue-virtual-scroller-list虚拟滚动,vue-virtual-scroller-list虚拟滚动一个虚拟滚动组件,用来处理非常长的或者无限滚动的列表。通过不渲染可视区域以外的内容,显示虚拟的滚动条来将可视区域范围内的条目渲染出来,用户滚动,会处理滚动行为(虚拟的滚动条),动态重新执行