vue 支持百萬(wàn)量級(jí)的無(wú)限滾動(dòng)組件詳解

更新時(shí)間：2023年02月16日 09:11:25 作者：程序員老魚(yú)

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

正文

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

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

分頁(yè)確實(shí)是一種解決方案，但是卻不是最好的體驗(yàn)方式。無(wú)限滾動(dòng)就是解決這種場(chǎng)景更好的技術(shù)手段

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

vue3-infinite-list

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

特點(diǎn)

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

安裝

npm

npm install vue3-infinite-list --save

或者 yarn

yarn add vue3-infinite-list

使用

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

import InfiniteList from 'vue3-infinite-list';

用無(wú)限滾動(dòng)組件標(biāo)簽包裹待滾動(dòng)數(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>

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

而且還可以動(dòng)態(tài)控制滾動(dòng)高度（每一項(xiàng)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>
  // 通過(guò)這個(gè)函數(shù)可以動(dòng)態(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;
      }
  };