超精悍 Vue3 無限滾動元件Vue3InfiniteList

今天來給大家分享一款 vue3.x 短小精悍的無限滾動加載庫Vue3InfiniteList。

vue3-infinite-list 基于 vue3.js 建構的零依賴輕量級海量資料無限滾動元件。

特性

• 體積小 & 零依賴 – gzipped 後隻有 3kb
• 百萬級清單渲染, 不費吹灰之力
• 支援滾動到指定條目 或 指定初始滾動偏移量
• 支援固定 或 可變 寬/高
• 垂直 or 水準 清單

安裝

npm install vue3-infinite-list --save           

引入使用

import InfiniteList from 'vue3-infinite-list'

<InfiniteList
    :data="data"
    :width="900"
    :height="220"
    :itemSize="115"
    scrollDirection="vertical"
    :debug="debug"
    v-slot="{ item, index }"
  >
    <div class="li-con li-con-r">
      item{{ index }} <br />
      xxxxxxx <br />
      xxxxxxx <br />
      <el-button type="primary" round>Primary</el-button>
    </div>
  </InfiniteList>           

配置參數

非常不錯的一款 vue3 無限滾動元件，如果你的項目需要海量大資料渲染，不妨去看看。

最後附上文檔及項目位址

# 示範位址
https://tnfe.github.io/vue3-infinite-list/
# 倉庫位址
https://github.com/tnfe/vue3-infinite-list           

好了，今天就分享到這裡了哈~