虚拟滚动

QVirtualScroll组件仅允许您显示一长串项目的一部分,并在用户在容器中滚动时更新可见项目。 这具有几个优点:仅渲染可见项,因此在任何给定时间点DOM树中的节点数量最少,并且内存消耗保持在最低水平。

QVirtualScroll当前有两种类型:“list”(使用QItems)和"table"(使用表格样式显示数据行)。

安装

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

用法

TIP

  • 为了在使用大列表时获得最佳性能,请使用Object.freeze(items)冻结在items属性中传递的数组。这允许Vue跳过使列表对更改作出响应的特性。
  • 将根据virtual-scroll-item-size属性和滚动容器的大小来计算要渲染的项目数,但是您可以使用virtual-scroll-slice-size属性。
  • 使用virtual-scroll-item-size指定元素的大小(高度或宽度的像素,如果是水平的话)。在屏幕上渲染元素后,它的大小会自动更新,但是如果您指定的元素大小接近实际大小,则会更好地显示滚动位置。不管您是否使用此属性,QVirtualScroll仍然可以使用,但是如果没有它,您可能会在连续滚动(在桌面设备上)或在移动设备上连续滚动的时候,容器的实际滚动略微偏离一两个元素时遇到滚动条不跟随鼠标抓取位置的情况。

WARNING

  • 浏览器规定了滚动容器的最大高度。 在IE11中,此值约为1,000,000px,而在其他浏览器中,则更多,但仍然有限。

滚动下面的示例以查看QVirtualScroll的运行情况。

基础

Basic

水平

Horizontal

不同模板

Different templates for items
Different templates for horizontal items

表格类型

注意type="table"属性

Basic table

具有与内容一起滚动的标题(不会留在原处)。

Table with scrolling header/footer

注意(在下面的示例中)使表格头部和底部“粘性”所需的CSS。 还要注意定义了头部和底部内容的其他作用域插槽。

WARNING

IE11不支持粘性头部/底部。

Sticky headers table

下面是一个涉及更多的示例,其中包括粘性头部/底部。

Playing with sticky headers

滚动目标

如果您需要指定滚动目标(因为自动检测到的不是所需的目标),则将CSS选择器(作为字符串)或DOM元素传递给scroll-target属性。

如果您需要使用整个页面的虚拟列表作为滚动元素,请设置scroll-target="body"

WARNING

  • 如果您通过带有scroll-target属性的自定义滚动目标容器,则必须确保该元素存在并且可以溢出(它必须具有最大高度和允许滚动的溢出)。
  • 如果滚动目标容器不能溢出,则将显示整个列表。

WARNING

如果您想为scroll-target使用Vue引用,请在安装组件后小心进行设置,如以下示例所示。

Custom scroll target by id
Custom scroll target by ref

滚动定位

Scroll to position

同步和异步

您还可以使用items-fn属性生成要显示在列表中的项目。

WARNING

确保使用同步函数来返回要显示的项目列表。

如果需要异步数据,请使用检索并渲染数据的组件。

Generate items on the fly

QVirtualScroll API

Loading API...
Please wait...