QVirtualScroll 组件允许您仅显示长列表项目的一部分，并在用户在容器中滚动时更新可见项目。这有几个优点：仅渲染可见项目，因此在任何给定时间 DOM 树中的节点数量最少，并且内存消耗保持在最低水平。
目前有两种类型的 QVirtualScroll：“列表”（使用 QItems）和“表格”（使用表格样式显示数据行）。
用法
提示
- （组合式 API）为了在使用大型列表时获得最佳性能，请不要使用 ref()/computed()/reactive()/等包装您传递给
itemsprop 的数组。这允许 Vue 跳过使列表“响应”更改。 - （选项式 API）为了在使用大型列表时获得最佳性能，请使用
Object.freeze(items)冻结您传递给itemsprop 的数组。这允许 Vue 跳过使列表“响应”更改。 - 将根据
virtual-scroll-item-sizeprop 和可滚动区域的大小计算将渲染的项目数量，但您可以使用virtual-scroll-slice-sizeprop 将其调整为您的需求。 - 使用
virtual-scroll-item-size指定元素的大小（高度的像素，如果是水平方向则为宽度）。元素在屏幕上渲染后，其大小会自动更新，但如果您指定一个接近实际大小的元素大小，则会获得更好的初始滚动位置指示。无论您是否使用此属性，QVirtualScroll 仍然可以工作，但如果没有它，您可能会遇到以下情况：在持续滚动时（在桌面端），滚动条没有跟随鼠标抓取位置；或者在移动端持续滚动时，容器的实际滚动会略微偏离一两个元素。
警告
每个浏览器都对滚动容器的最大高度有限制。在 IE11 中，大约为 1,000,000px，而在其他浏览器中则要多得多，但仍然有限制。
滚动下面的示例以查看 QVirtualScroll 的实际效果。
基本
水平
不同的模板
表格类型
请注意 type="table" 属性。
带有标题，标题会随着内容一起滚动（不会固定在位置）。
请注意（在下面的示例中）使表格标题和页脚“粘滞”所需的 CSS。还要注意定义标题和页脚内容的其他作用域插槽。
下面是一个更复杂的示例，演示了粘滞标题和页脚的使用。
滚动目标
如果您需要指定滚动目标（因为自动检测到的目标不是所需的），请将 CSS 选择器（作为字符串）或 DOM 元素传递给 scroll-target prop。
如果您需要将虚拟列表与整个页面作为滚动元素一起使用，请设置 scroll-target="body"。
警告
- 如果您使用
scroll-targetprop 传递自定义滚动目标容器，则必须确保该元素存在并且可以溢出（它必须具有最大高度和允许滚动的溢出）。 - 如果滚动目标容器无法溢出，则会渲染整个列表。
警告
如果您想为 scroll-target 使用 Vue 引用，请注意在挂载组件后设置它，如下面的示例所示。
滚动到指定位置
同步和异步
您还可以通过使用 items-fn prop 生成要在列表中显示的项目。
警告
请确保使用返回要显示的项目列表的同步函数。
如果您需要异步数据，请使用检索和渲染数据的组件。
实用程序类
有两个 CSS 类您可以使用（如果您需要）来控制 VirtualScroll 大小计算
- 在 VirtualScroll 渲染的元素上使用
q-virtual-scroll--with-prev类来指示该元素应与前一个元素组合（主要用例是为来自同一数据行的多个表格行生成）。 - 在 VirtualScroll 渲染的元素上使用
q-virtual-scroll--skip类来指示在大小计算中应忽略该元素的大小。