vue 支持百萬量級的無限滾動組件詳解

更新時間：2023年02月16日 09:11:25 作者：程序員老魚

這篇文章主要為大家介紹了vue 支持百萬量級的無限滾動組件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

滾動相信大家都做過，但是不知道大家當(dāng)遇到大量數(shù)據(jù)甚至幾百萬條數(shù)據(jù)時該怎么辦呢?

或許有小伙伴說：用分頁呀，每次只展示有限的數(shù)據(jù)，需要更多的時候點擊下一頁呀

分頁確實是一種解決方案，但是卻不是最好的體驗方式。無限滾動就是解決這種場景更好的技術(shù)手段

而今天就是給大家分享一款可以承受百萬量級數(shù)據(jù)的無限滾動組件vue3-infinite-list

vue3-infinite-list

vue3-infinite-list是一個針對vue3的短小精悍的無限滾動組件，它體積非常小、零依賴gzip只有 3kb。并且使用的是最新的技術(shù)棧 Vue3 setup api + TypeScript

特點

體積小 & 零依賴 – gzipped 后只有 3kb
百萬級列表渲染, 不費吹灰之力
支持滾動到指定條目或指定初始滾動偏移量
支持固定或可變寬/高
垂直 or 水平列表
使用簡單可以結(jié)合各類UI庫使用
豐富的demo演示案例

安裝

npm

npm install vue3-infinite-list --save

或者 yarn

yarn add vue3-infinite-list

使用

在應(yīng)用模塊內(nèi)引入無限滾動組件

import InfiniteList from 'vue3-infinite-list';

用無限滾動組件標(biāo)簽包裹待滾動數(shù)據(jù)列表

 <InfiniteList 
   :data="data" 
   :width="'100%'" 
   :height="500" 
   :itemSize="50" 
   :debug="debug" 
   v-slot="{ item, index }"
   >
    <div class="li-con">{{ index + 1 }} : {{ item }}</div>
  </InfiniteList>

使用非常簡單，內(nèi)部可以結(jié)合element-plus或者antd-vue、tdesign等UI庫。

而且還可以動態(tài)控制滾動高度（每一項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>
  // 通過這個函數(shù)可以動態(tài)設(shè)置元素寬高.
const getItemSize = (i: number): number => {
      switch (i % 4) {
        case 1:
          return 80;
        case 2:
          return 50;
        case 3:
          return 100;
        default:
          return 200;
      }
  };