Skip to content

虚拟滚动条

v-virtual-scroll 组件用于展示虚拟的,infinite(无限的) 列表。它支持动态的高度,也支持横向滚动。是分页模式的另一种替代方式。

Virtual scroll Entry

TIP

此特性自 v3.2.0 (Orion) 引入

使用

虚拟滚动程序只显示足够的记录来填充视图,并使用现有组件,并用新的数据对其进行再填充。

API

组件描述
v-virtual-scroll主要组件

组件结构

v-virtual-scroll 组件仅有一个默认插槽,没有其他样式选项。它通常包含大量的 v-list-item

Virtual scroll Anatomy

元素 / 区域描述
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 组件通过仅渲染填充滚动器可见区域的所需内容来实现大量项目的渲染。