# 什么是无限滚动组件当我们的列表页有几百万条数据的时候应该怎么办呢？分页也许不是最好的体验方式，无限滚动就是解决这种场景更好的技术手段。当用户向下滚动内容时，会自动添加下一页的list组件，加载更多内容。用户无需等待页面预加载，而且对于前端渲染来说不会反复渲染大量组件提高了页面渲染性能。所以无限滚动可以为用户提供更好的体验。 ![a.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8ba12e10b04f462faba4b24782029938~tplv-k3u1fbpfcp-watermark.image?) 无限滚动是电商网站、CMS后台等应用程序中非常常见的一种模式。在线零售商喜欢这种加载产品的模式，因为它允许用户无缝浏览一个类别中可用的每个产品，而不必经常暂停并等待下一页加载。 # 关于vue3-infinite-list ### 官网： https://github.com/tnfe/vue3-infinite-list `vue3-infinite-list`是一个针对vue3的短小精悍的无限滚动组件，它体积非常小、零依赖gzip只有 3kb。虽然vue相关的无限滚动开源组件也有很多，但是对比同类产品`vue3-infinite-list`依然有不少自己的特点，并且它完全使用`vue3 setup api + typescript`编写，项目LOGO是一直千足毛毛虫😃 。 ![logo-big.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ace5f368641f44779f4863e183613c00~tplv-k3u1fbpfcp-watermark.image?) # 特性 - **体积小 & 零依赖** – gzipped 后只有 3kb - **支持百万级列表渲染**, 不费吹灰之力 - **支持滚动到指定条目** 和 **指定初始滚动偏移量** - **支持固定** 和 **可变** 宽/高的各类列表 - **支持垂直** or **水平** 不同布局的列表 - **For Vue3** typescript编写 - **使用简单**可以结合各类UI库使用 ![1.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dc67062159aa494ca1079e0f8c2c2900~tplv-k3u1fbpfcp-watermark.image?) # 如何使用 ![demo6.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/40cc515b09ba4f66b7631eb6cd651321~tplv-k3u1fbpfcp-watermark.image?) #### 使用 [npm](https://www.npmjs.com/): ``` npm install vue3-infinite-list --save ``` #### 使用 [yarn](https://yarnpkg.com/): ``` yarn add vue3-infinite-list ``` ## 引用 ``` import InfiniteList from 'vue3-infinite-list'; ``` ```

{{ index + 1 }} : {{ item }}

``` ## 使用示例 1. ### 基本用法: item固定高度类型, 垂直滚动(默认) [demo](https://tnfe.github.io/vue3-infinite-list/#/demo1) ![demo1.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3f8ddb7e276d4b13ab0343a5a5ea3567~tplv-k3u1fbpfcp-watermark.image?) 使用非常简单，内部可以结合element-plus或者antd-vue、tdesign等UI库。 ```

{{ index + 1 }} : {{ item }}

``` 2. ### 设置滚动方向为水平方向 [demo](https://tnfe.github.io/vue3-infinite-list/#/demo2) ```

item{{ index }}
xxxxxxx
xxxxxxx

Primary

``` 这里`scrollDirection="horizontal"`可以设置滚动方向为水平。 3. ### 动态控制滚动高度（每一项item高度值是变化的） [demo](https://tnfe.github.io/vue3-infinite-list/#/demo3) ![demo3.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8e0e6b307e3741638debe0b6c72e6740~tplv-k3u1fbpfcp-watermark.image?) ```

item {{ index }} : {{ item }}

``` ``` // 通过这个函数可以动态设置元素宽高. const getItemSize = (i: number): number => { switch (i % 4) { case 1: return 80; case 2: return 50; case 3: return 100; default: return 200; } }; ``` 这里 `getItemSize` 是一个有如下语法的函数 : `(i: number): number`, 通过这个函数可以动态设置元素宽高。 4. ### 滚动到指定元素位置 [demo](https://tnfe.github.io/vue3-infinite-list/#/demo4) ```

item{{ index + 1 }} : {{ item }}

``` 你也可以使用 `scrollToIndex` 来滚动到指定元素。 5. ### 滚动到指定元素（更精细的对齐方式） [demo](https://tnfe.github.io/vue3-infinite-list/#/demo4) ```

item{{ index + 1 }} : {{ item }}

``` 你可以使用 `scrollToIndex` 和 `scrollToAlignment` 属性来指定滚动元素如何与滚动区域对齐, 由四个选项: `auto`, `start`, `center`, `end`，分别对应自动对齐、位于容器起始，位于容器中间，位于容器末尾。 6. ### 滚动到指定位置，单位是像素 [demo](https://tnfe.github.io/vue3-infinite-list/#/demo5) ```

index: {{ index + 1 }}

xxxxxxxxxx

Primary

Success

``` 你也可以使用 `scrollOffset` 来滚动到指定位置。 7. ### 支持动态变更数据 [demo](https://tnfe.github.io/vue3-infinite-list/#/demo6) ```

item{{ index + 1 }}

2022-05-01

Name: Tom

Button

``` 只需要动态的改变绑定的 `data`. 8. ### 设置额外渲染元素的数量 [demo](https://tnfe.github.io/vue3-infinite-list/#/demo7) ```

{{ index + 1 }} : {{ item }}