vue 支持百万量级的无限滚动组件详解
更新时间：2023年02月16日 09:11:25 作者：程序员老鱼
这篇文章主要为大家介绍了vue 支持百万量级的无限滚动组件详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
正文
滚动相信大家都做过，但是不知道大家当遇到大量数据甚至几百万条数据时该怎么办呢?
或许有小伙伴说：用分页呀，每次只展示有限的数据，需要更多的时候点击下一页呀
分页确实是一种解决方案，但是却不是最好的体验方式。无限滚动就是解决这种场景更好的技术手段
而今天就是给大家分享一款可以承受百万量级数据的无限滚动组件vue3-infinite-list
vue3-infinite-list
vue3-infinite-list是一个针对vue3的短小精悍的无限滚动组件，它体积非常小、零依赖gzip只有 3kb。并且使用的是最新的技术栈 Vue3 setup api + TypeScript
特点
- 体积小 & 零依赖 – gzipped 后只有 3kb
- 百万级列表渲染, 不费吹灰之力
- 支持滚动到指定条目 或 指定初始滚动偏移量
- 支持固定 或 可变 宽/高
- 垂直 or 水平 列表
- 使用简单可以结合各类UI库使用
- 丰富的demo演示案例
安装
npm
npm install vue3-infinite-list --save
或者 yarn
yarn add vue3-infinite-list
使用
在应用模块内引入无限滚动组件
import InfiniteList from 'vue3-infinite-list';
用无限滚动组件标签包裹待滚动数据列表
<InfiniteList
:data="data"
:width="'100%'"
:height="500"
:itemSize="50"
:debug="debug"
v-slot="{ item, index }"
>
<div class="li-con">{{ index + 1 }} : {{ item }}</div>
</InfiniteList>
使用非常简单，内部可以结合element-plus或者antd-vue、tdesign等UI库。
而且还可以动态控制滚动高度（每一项item高度值是变化的）
<InfiniteList
:data="data"
:width="'100%'"
:height="520"
:itemSize="getItemSize"
:debug="debug"
v-slot="{ item, index }"
>
<div class="li-con">item {{ index }} : {{ item }}</div>
</InfiniteList>
// 通过这个函数可以动态设置元素宽高.
const getItemSize = (i: number): number => {
switch (i % 4) {
case 1:
return 80;
case 2:
return 50;
case 3:
return 100;
default:
return 200;
}
};
功能
- item固定高度类型, 垂直滚动(默认)
- 设置滚动方向为水平方向
- 动态控制滚动高度（每一项item高度值是变化的）
- 滚动到指定元素位置（可以设置对齐方式）
- 支持动态变更数据
- 设置额外渲染元素的数量
github: github.com/tnfe/vue3-i…
文档地址：tnfe.github.io/vue3-infini…
以上就是vue 支持百万量级的无限滚动组件详解的详细内容，更多关于vue 百万量级的无限滚动的资料请关注脚本之家其它相关文章！
相关文章
vue.js内部自定义指令与全局自定义指令的实现详解（利用directive）
这篇文章主要给大家介绍了关于vue.js内部自定义指令与全局自定义指令的实现方法，vue.js中实现自定义指令的主要是利用directive，directive这个单词是我们写自定义指令的关键字，需要的朋友们下面跟着小编来一起学习学习吧。2017-07-07
这篇文章主要介绍了vue踩坑之backgroundImage路径问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要给大家介绍了关于Vue数字相加、相减精度丢失处理3种方法的相关资料,前端在操作加减乘除计算时,经常会出现精度缺失问题,有时会显示为科学计数的样式,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了Vue实现户籍管理系统，户籍信息的添加与删除，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
vue中实现支持txt,docx,xlsx,mp4格式文件预览功能(纯前端)
对于Vue你可以实现文件的预览功能,这篇文章主要给大家介绍了关于vue中实现支持txt,docx,xlsx,mp4格式文件预览功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
在开发工作过程中，我们会遇到各种各样的表格数据导入，动态数据导入可以减少人为操作，减少出错。本文为大家介绍了Vue3实现动态导入Excel表格数据的方法，需要的可以参考一下2022-11-11
这篇文章主要介绍了Vue中关于重新渲染组件的方法及总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了vue router 动态路由清除方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了最简单的vue消息提示全局组件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
这篇文章主要为大家详细介绍了Vue实现双向数据绑定的方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
最新评论