QVirtualScroll 元件讓您僅顯示長列表中的一部分項目，並在使用者於容器中捲動時更新可見項目。這有幾個優點：僅呈現可見項目，因此在任何給定時間點 DOM 樹中節點數量最少，且記憶體消耗保持在最低水平。
目前有兩種 QVirtualScroll 類型：「list」（使用 QItems）和「table」（使用表格樣式顯示資料列）。
用法
提示
- （Composition API）為了在使用大型列表時獲得最佳效能，請勿使用 ref()/computed()/reactive()/等包裝您在
itemsprop 中傳遞的陣列。這允許 Vue 跳過使列表「響應式」變更。 - （Options API）為了在使用大型列表時獲得最佳效能，請使用
Object.freeze(items)凍結您在itemsprop 中傳遞的陣列。這允許 Vue 跳過使列表「響應式」變更。 - 將根據
virtual-scroll-item-sizeprop 和可捲動區域的大小計算將呈現的項目數量，但您可以使用virtual-scroll-slice-sizeprop 將其調整為符合您的需求。 - 使用
virtual-scroll-item-size指定元素的大小（高度的像素，或水平方向的寬度）。在螢幕上呈現元素後，其大小會自動更新，但如果您指定的元素大小接近實際大小，您將獲得更好的初始捲動位置指示。無論您是否使用此屬性，QVirtualScroll 仍會運作，但沒有它，您可能會遇到捲軸在連續捲動時（在桌面上）沒有跟隨滑鼠抓取位置，或者當在行動裝置上連續捲動時，容器的實際捲動稍微偏離一個或兩個元素的情況。
警告
每個瀏覽器都對捲動容器的高度施加了最大高度限制。在 IE11 中，這大約是 1,000,000 像素，而在其他瀏覽器中則更多，但仍然有限制。
捲動以下範例以查看 QVirtualScroll 的實際運作情況。
基本
水平
不同範本
表格類型
請注意 type="table" 屬性。
具有與內容一起捲動的標頭（不會固定在原位）。
請注意（在以下範例中）使表格標頭和頁尾「固定」所需的 CSS。另請注意定義標頭和頁尾內容的其他作用域插槽。
以下是一個更複雜的範例，展示如何使用固定標頭和頁尾。
捲動目標
如果您需要指定捲動目標（因為自動偵測到的不是所需的目標），請將 CSS 選擇器（作為字串）或 DOM 元素傳遞給 scroll-target prop。
如果您需要將虛擬列表與整個頁面作為捲動元素一起使用，請將 scroll-target="body" 設定為。
警告
- 如果您傳遞具有
scroll-targetprop 的自訂捲動目標容器，您必須確保元素存在且可以溢位（它必須具有最大高度和允許捲動的溢位）。 - 如果捲動目標容器無法溢位，您將獲得整個列表的呈現結果。
警告
如果您想將 Vue 參考用於 scroll-target，請注意在掛載元件後設定它，如下例所示。
捲動到位置
同步與非同步
您也可以使用 items-fn prop 產生要在列表中顯示的項目。
警告
請確保使用同步函數，該函數傳回要顯示的項目列表。
如果您需要非同步資料，請使用檢索和呈現資料的元件。
工具類別
有兩個 CSS 類別可供您使用（如果您需要）來控制 VirtualScroll 大小計算
- 在 VirtualScroll 呈現的元素上使用
q-virtual-scroll--with-prev類別，以指示該元素應與前一個元素分組（主要使用案例是從同一資料列產生的多個表格列）。 - 在 VirtualScroll 呈現的元素上使用
q-virtual-scroll--skip類別，以指示在大小計算中應忽略元素大小。