code狂魔

V1

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;
      }
  };

功能

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

github: https://github.com/tnfe/vue3-infinite-list

文档地址: https://tnfe.github.io/vue3-infinite-list/#/demo1

最后

欢迎加入前端实验室读者交流群,群里有不少技术大神,不定时会分享一些技术要点,更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~

进群方式:在下方公众号后台,回复 111 ,按提示操作即可进群。

关注【前端实验室】公众号回复: bbbb223

即可免费获取拉勾教育价值17999元的全套前端教程

分类:

前端

标签:

Vue.js

作者介绍

code狂魔
V1