code狂魔
2023/01/30阅读:55主题:萌绿
牛皮!一款可以支持百万量级的无限滚动组件
哈喽,大家好!,我是前端实验室
的大师兄!
滚动相信大家都做过,但是不知道大家当遇到大量数据甚至几百万条数据时该怎么办呢?
或许有小伙伴说: 用分页呀,每次只展示有限的数据,需要更多的时候点击下一页呀
分页确实是一种解决方案,但是却不是最好的体验方式。无限滚动就是解决这种场景更好的技术手段
无限滚动是电商网站和CMS后台等应用程序中最常见的一种模式,当用户向下滚动内容时,会自动添加下一页的list组件。用户无需等待页面预加载,而且对于前端渲染来说不会反复渲染大量组件提高了页面渲染性能。所以无限滚动可以为用户提供更好的体验。
而今天就是给大家分享一款可以承受百万量级数据的无限滚动组件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: https://github.com/tnfe/vue3-infinite-list
文档地址: https://tnfe.github.io/vue3-infinite-list/#/demo1
最后
欢迎加入前端实验室读者交流群,群里有不少技术大神,不定时会分享一些技术要点,更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~
进群方式:在下方公众号后台,回复 111
,按提示操作即可进群。
关注【前端实验室】公众号回复: bbbb223
即可免费获取拉勾教育价值17999元的全套前端教程
作者介绍