超精悍 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           

好了，今天就分享到这里了哈~