无限滚动
v-infinite-scroll 组件用于展示某个潜在无限长度的列表，这个列表会在滚动时加载更多的元素。它可以支持水平方向或者垂直方向的列表。
TIP
此特性在 v3.4.0 (Blackguard) 版本引入。
使用
当滚动到底部时，可以选择自动加载新元素或者点击后加载新元素。
当组件需要加载更多内容时，会触发 load 事件。它的参数是包含两个属性的对象。
side告诉您新内容应该添加到哪一侧，可以是'start'或'end'。函数的返回值是一个字符串，描述了新内容是否成功加载。done是一个回调函数，应在新内容加载完成时调用。它接受一个参数status，用于描述加载是否成功。请参阅下表，了解可能的值。
| 支持状态 | 描述 |
|---|---|
'ok' | 内容成功添加 |
'error' | 在添加内容时出现了问题。这将显示 error 插槽。 |
'empty' | 没有更多内容可获取。这将显示 empty 插槽。 |
'loading' | 内容正在加载中。这将显示内容正在加载的消息。此状态仅由组件在内部设置，不应与 done 函数一起使用。 |
API
| 组件 | 描述 |
|---|---|
| v-infinite-scroll | 主要组件 |
组件结构
v-infinite-scroll 可以与默认插槽中的任何内容一起使用。
| 元素 / 区域 | 描述 |
|---|---|
| 1. 容器 | 无限滚动内容的容器 |
| 2. 加载部分 | 加载内容的区域 |
指南
v-infinite-scroll 组件是一个容器，允许你对用户到达内容区域末尾做出反应。当你需要显示未知但大量的项目，并且不想一次加载它们时，这非常有用。
属性
v-infinite-scroll 组件有几个属性可以用来自定义其行为。
模式
该组件的默认行为是当滚动条接近末尾时自动尝试加载更多内容。然而，也支持手动模式，在这种模式下用户需要进行一些操作来加载内容。默认情况下，这是一个按钮，但可以通过插槽 进行自定义。
布局
v-infinite-scroll 组件可以用于垂直或水平滚动。
Side
默认情况下， v-infinite-scroll 组件假定新内容将出现在现有内容的末尾。但它也支持在开始位置添加内容，并在开头和末尾同时出现内容。
使用 start 侧添加内容时，滚动条将从内容的底部开始。
使用 both 侧添加内容时，滚动条将从内容的中间开始。
颜色
默认的加载更多按钮和加载中的旋转器可以使用 color 属性进行着色。
插槽
v-infinite-scroll 组件公开了几个插槽，允许您进一步自定义其行为。
| 元素 / 区域 | 描述 |
|---|---|
| 1. 容器 | 默认插槽 |
| 2. Load-more | manual 模式下且状态不是 loading 时显示的插槽 |
| 3. Loading | 当模式设置为 manual 且状态为 loading 时显示的插槽 |
| 4. Empty | 当状态为 empty 时显示的插槽 |
| 5. Error | 当状态为 error 时显示的插槽 |
加载
您可以使用 loading 插槽自定义加载消息。
Load more
当使用 manual 模式时，您可以使用 load-more 插槽自定义加载更多内容所需的操作。
Empty
您可以使用 empty 插槽自定义空消息。
Error
错误插槽在从 done 回调返回状态为 error 时显示。
示例
以下是一系列示例，演示了更高级和实际应用 v-infinite-scroll 组件的用法。
虚拟化无限滚动器
如果您的无限列表中的项目大小一致，您可以很容易地将列表虚拟化，无论您向任何方向滚动多远，只渲染少量项目。