虚拟滚动条
v-virtual-scroll
组件用于展示虚拟的,infinite(无限的) 列表。它支持动态的高度,也支持横向滚动。是分页模式的另一种替代方式。
TIP
此特性自 v3.2.0 (Orion) 引入
使用
虚拟滚动程序只显示足够的记录来填充视图,并使用现有组件,并用新的数据对其进行再填充。
API
组件 | 描述 |
---|---|
v-virtual-scroll | 主要组件 |
组件结构
v-virtual-scroll
组件仅有一个默认插槽,没有其他样式选项。它通常包含大量的 v-list-item。
元素 / 区域 | 描述 |
---|---|
1. 容器 | 根据 items 属性渲染内容的区域 |
指南
v-virtual-scroll
允许你在一个页面上展示数千条数据,而不必担心性能问题,因为数据不会同时显示出来。v-virtual-scroll
适合于 v-card 类似的,没有过多的样式的组件搭配,提供更好的视觉效果。
属性
v-virtual-scroll
组件支持配置它的根节点和节点高度的 API。
高度
v-virtual-scroll
组件没有设定任何的初始高度。
下面的代码片段使用了 height 属性:
确保组件高度的另一种方法是将其放置在一个使用 display: flex
的元素中。
列表项高度
因为对于列表来说列表项高度是固定的,每项一致的。所以我们推荐为其确定一个 item-height 值。它会用于 v-virtual-scroll
的计算。
如果你的列表项没有统一的高度,则可以忽略 item-height 属性,而让 v-virtual-scroll
动态地计算每一项的高度。
示例
下面是 v-virtual-scroll
的示例集,用来表明不同的属性在应用程序中的作用。
用户列表
v-virtual-scroll
组件通过仅渲染填充滚动器可见区域的所需内容来实现大量项目的渲染。