虚拟滚动

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

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

QVirtualScroll API

用法

TIP

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

WARNING

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

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

基础




水平




不同模板







表格类型

注意type="table"属性




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




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




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




滚动目标

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

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

WARNING

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

WARNING

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










滚动定位




同步和异步

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

WARNING

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

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




Utility classes

有两个CSS类可用于(如果需要)控制VirtualScroll大小计算:

  • 在VirtualScroll呈现的元素上使用q-virtual-scroll--with prev类,指示该元素应该与前一个元素分组(主要用例是针对从同一行数据生成的多个表行)。
  • 对VirtualScroll呈现的元素使用q-virtual-scroll--skip类,指示在计算大小时应忽略元素大小。