脚本宝典收集整理的这篇文章主要介绍了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 支持百万量级的无限滚动组件详解全部内容，希望文章能够帮你解决vue 支持百万量级的无限滚动组件详解所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。