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