牛皮！一款支持百万量级的无限滚动组件

大家好,我是前端实验室的老鱼！一名资深的互联网玩家，专注分享大前端领域技术、面试宝典、学习资料等 | 副业赚钱~

滚动相信大家都做过，但是不知道大家当遇到大量数据甚至几百万条数据时该怎么办呢?

或许有小伙伴说：用分页呀，每次只展示有限的数据，需要更多的时候点击下一页呀

分页确实是一种解决方案，但是却不是最好的体验方式。无限滚动就是解决这种场景更好的技术手段

而今天就是给大家分享一款可以承受百万量级数据的无限滚动组件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;
      }
  };

功能

1. item固定高度类型, 垂直滚动(默认)
2. 设置滚动方向为水平方向
3. 动态控制滚动高度（每一项item高度值是变化的）
4. 滚动到指定元素位置（可以设置对齐方式）
5. 支持动态变更数据
6. 设置额外渲染元素的数量

github: github.com/tnfe/vue3-i…

文档地址：tnfe.github.io/vue3-infini…

最后

大家好,我是前端实验室的老鱼！一名资深的互联网玩家，专注分享大前端领域技术、面试宝典、学习资料、副业等~

喜欢的朋友，点赞收藏支持一下，也欢迎交流~

启AdminJS成长之旅！这是我参与「AdminJS日新计划 · 2 月更文挑战」的第 7 天，点击查看活动详情