【vue优化】虚拟滚动vue-virtual-scroller

最新推荐文章于 2024-07-02 15:21:39 发布
最新推荐文章于 2024-07-02 15:21:39 发布
阅读量1.8k 收藏
点赞数
分类专栏： vue优化 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jieweiwujie/article/details/122667135
版权
在处理大量数据的列表展示时，一次性渲染所有DOM会导致性能问题。虚拟滚动解决方案如vue-virtual-scroller应运而生，它只渲染可视区域的内容，滚动时动态替换，以此提高性能。原理是监听滚动事件，实时计算需要显示的DOM和位移。对于数据量不大的情况，常规滚动方式更为合适。
摘要由CSDN通过智能技术生成

GitHub - Akryum/vue-virtual-scroller: ⚡️ Blazing fast scrolling for any amount of data





Vue 展示巨量数据，vue-virtual-scroller 使用说明 vue3 vue2_十月ooOO的博客-CSDN博客_vue-virtual-scroller

1. 安装
安装 vue-virtual-scroller

npm i vue-virtual-scroller
1
安装完后 package.js 中会多出

    "vue-virtual-scroller": "^1.0.10"
1
2. vue 中引入 vue-virtual-scroller
main.js 中引入 vue-virtual-scroller 并 use 它

// vue virtual scroller
import "vue-virtual-scroller/dist/vue-virtual-scroller.css" // 引入它的 css
import VueVirtualScroller from "vue-virtual-scroller" // 引入它
Vue.use(VueVirtualScroller) // use 它

vue-virtual-scroller
最低0.47元/天 解锁文章
前端小云儿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue-virtual-scroller-展示大量数据列表-虚拟列表展示优化
JackieDYH的博客
07-08 580
是一个 Vue 组件库，用于高效地渲染大量数据项，通过虚拟滚动来提升性能。它适用于长列表、网格、表格等场景。
vuevirtualscroller让拥有任何数据量的页面都能平滑滚动
08-08
vue-virtual-scroller让拥有任何数据量的页面都能平滑滚动
Vue 展示巨量数据，vue-virtual-scroller 使用说明 vue3 vue2
热门推荐
学习笔记
07-31 3万+
Vue 展示巨量数据，vue-virtual-scroller 使用说明 vue3 vue2 一、遇到的问题 最近在做的一个小工具中需要解决一个展示巨量数据列表的问题，数据有 8万 多条。 刚开始我是直接让它渲染的，结果用了60秒之多，我以为是数据处理耗时多，经过排查，发现是 dom 渲染用时长，数据处理其实只用了不到 100ms，如下图： 二、解决方案 vue-virtual-scroller 所以目前主要需要解决的就是如何能流畅展示这么多数据的问题，搜了下，搜到 vue-virtual-scrolle
vue之虚拟滚动
在路上`的博客
01-15 2363
以上代码中，RecycleScroller会渲染dataList中的数据，每个列表项的高度是50px，使用页面模式和垂直滚动，渲染缓冲区大小是200px，预渲染10个列表项，并在列表项更新时触发update事件。在页面模式下，滚动容器是document.documentElement，否则是RecycleScroller自身。虚拟滚动的原理是只渲染可视区域内的数据，当用户滚动时，动态计算并渲染新的可视数据，从而实现大数据量的流畅滚动。item-size：数字，每个列表项的大小（高度或宽度）。
vue-virtual-scroller的使用，展示巨量数据，长列表优化，虚拟列表
muzidigbig的博客
08-06 9250
​二、vue-virtual-scroller的使用，长列表优化，虚拟列表，纵想丝滑 对于长列表数据有 10万 多条来说，我们大部分的操作都是： 1.懒加载，分页， 2.Object.freeze 冻结数组取消响应式，因为大多时候都是展示 3.高清图替换成缩略图，因为很多时候长列表的图尺寸都比较小，所以可以用小图来代替 以上能解决大部分的长列表问题，在可以分页的情况下。 但是，还有两个问题未解决，那就是： 1.不能分页的时候怎么办 2.当用户向下滑动加载了很多很多的内容时，可能是1000个10000
虚拟滚动-Vue 展示巨量数据，vue-virtual-scroller 使用说明 vue3 vue2
細水、長流√的专栏
09-10 2859
所有的操作都在官方 API 文档中有，我只是摘取了部分，哪里不太明白的话可以去看原文档。这是我做的另一个electron工具里的内容。
vue-virtual-scroller：:high_voltage:大量数据快速滚动
02-08
虚拟虚拟卷轴 快速滚动任意数量的数据| |赞助商目录安装npm install --save vue-virtual-scroller :warning: 现在， vue-virtual-scroller使用在显示时自动刷新自身，以防止显示故障。 这意味着您需要包括vue-...
vue-scroller 页面滚动相关总结
01-07
npm i vue-scroller 2 引入 import Vue from 'vue' import VueScroller from 'vue-scroller' Vue.use(VueScroller) 3 使用 1）添加上拉加载方法和下拉刷新方法 2）加载完成调用 相应的方法结束动画，不然的话会一直...
vue-virtual-scroll-grid：Vue 3的可重用组件，以高效的方式将具有大量项目（例如1000多个项目）的列表呈现为网格
02-15
Vue 3的虚拟滚动网格这是Vue 3的可重用组件，它以高效的方式将具有大量项目（例如1000多个项目）的列表呈现为网格。特征使用虚拟滚动/窗口化渲染项目，因此DOM节点数很少。 支持使用分页的API在后台加载项目。 支持...
elp-cascader:基于'element-ui'和'vue-virtual-scroller'的Vue组件
05-28
elp-cascader Cascader based on 'element-ui' and 'vue-virtual-scroller'@vueblocks/elp-cascader基于element-ui和vue-virtual-scroller的级联选择器，用虚拟列表的方式逐级渲染列表。适用于数据量较大的场景。...
vue-scroller记录滚动位置的示例代码
11-28
在Vue.js应用中，特别是在构建具有多个视图和滚动区域的单页面应用程序（SPA）时，保持用户滚动位置的一致性是一项重要的用户体验优化。`vue-scroller`是一个用于实现滚动功能的Vue组件，它提供了类似iscroll的功能...
Vuescroll是一个基于vuejs2X的虚拟滚动条
08-08
Vuescroll 是一个基于 vue.js 2.X的虚拟滚动条，它拥有多个模式可供你选择： slide 模式、native 模式和pure-native模式， 并且它还支持定制滚动条的样式，检测内容尺寸变化、能够使内容分页、支持上拉-刷新，下推加载等诸多功能。
vue-virtual-scroll:虚拟列表，可以实现无限加载
04-11
虚拟列表实现无限加载 在进行前端业务开发时，很容易遇到需要加载巨大列表的场景，比如微博的信息流、微信的朋友圈和直播平台的聊天框，这些列表通常具有两个显着的特点 不能分页 只要用户愿意就可以无限的滚动下去 在这种场景下，如果直接加载一个数量级很大的列表，会造成页面假死，使用传统的触底加载能在一定的程度上缓解这种情况，但是在加载到一定量级的元素时，会因为页面同时存在大量的DOM元素而出现过度占用内存、页面卡顿的情况，带来糟糕的用户体验，因此我们必须对这种业务场景做出相应的优化，只加载需要显示的元素是这种情况的唯一解，「虚拟列表」应运而生。
vue-scroller
04-09
vue-scroller移动端下拉加载组件 vue-scroller移动端下拉加载组件 vue-scroller移动端下拉加载组件
vue-virtual-scroll-list::high_voltage:一个Vue组件以高渲染性能和高效率支持大量数据列表
04-30
目录 好处 仅需3个道具，简单易用。 具有高渲染性能和效率的大数据列表。 您不必担心项目大小，它将自动计算。 现场演示 https://codesandbox.io/s/live-demo-virtual-list-e1ww1 使用简单 npm install vue-virtual-scroll-list --save 根成分： < template> < div> < virtual xss=removed xss=removed xss=removed xss=removed>
vue3长列表优化，使用vue-virtual-scroller实现直播间弹幕列表虚拟滚动效果
最新发布
07-02 1721
但是需要注意：获取DynamicScroller这个组件的时候，要使用document.getElementById('liveMsg')这种形式，不能使用ref这种，因为ref获取到的并不是一个html元素，没有scrollTop方法，所以无法滚动到底部。这三个组件区别是滚动每一项高度是固定的还是动态的，Recycle就是固定的高度，Dynamic是动态的，动态的话，必须要包含DynamicScrollerItem。
vue-virtual-scroller用法，长列表优化
weixin_43239880的博客
10-14 2万+
vue-virtual-scroller的使用，长列表优化，虚拟列表，纵想丝滑 对于长列表来说，我们大部分的操作都是：1.懒加载，分页，2.Object.freeze冻结数组取消响应式，因为大多时候都是展示 3.高清图替换成缩略图，因为很多时候长列表的图尺寸都比较小，所以可以用小图来代替 以上能解决大部分的长列表问题，在可以分页的情况下 但是，还有两个问题没有解决，那就是：1.不能分页的时候怎么办 2.当用户向下滑动加载了很多很多的内容时，可能是1000个10000个的时候。这个时候浏览器就会变得卡顿，
Vue2 - vue-virtual-scroller 长列表优化原理
qq_40147756的博客
01-23 1379
Vue2 - vue-virtual-scroller 长列表优化原理。虚拟滚动
vue3使用vue-virtual-scroller
05-12
Vue Virtual Scroller 是一个 Vue.js 的虚拟滚动列表组件，它可以大大提高列表的性能和渲染速度。在 Vue 3 中，使用 Vue Virtual Scroller 的方法和在 Vue 2 中基本相同。 首先，你需要安装 `vue-virtual-scroller`： ``` npm install vue-virtual-scroller --save ``` 然后在你的 Vue 组件中引入它： ```javascript import { VueVirtualScroller } from 'vue-virtual-scroller' import 'vue-virtual-scroller/dist/vue-virtual-scroller.css' export default { components: { VueVirtualScroller }, // ... } ``` 在模板中使用 `vue-virtual-scroller`： ```html <template> <vue-virtual-scroller class="my-list" :items="items" item-height="50"> <template v-slot="{ item }"> <div class="my-item">{{ item }}</div> </template> </vue-virtual-scroller> </template> ``` 其中，`:items` 是一个数组，包含了要渲染的列表项，`item-height` 是每个列表项的高度，`v-slot` 是一个插槽，用于渲染每个列表项。你可以在插槽中使用 `item` 变量来访问每个列表项的数据。 以上就是在 Vue 3 中使用 `vue-virtual-scroller` 的基本方法。你可以根据自己的需求来调整列表项的高度和样式。同时，你也可以根据官方文档的说明来使用其他高级特性，如加载更多、缓存等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小云儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值