跳至主要內容
版本：v8

虛擬滾動

正在尋找 ion-virtual-scroll 嗎？

ion-virtual-scroll 在 v6.0.0 中已棄用，並在 v7.0.0 中移除。 我們建議使用以下詳述的 @angular/cdk 套件。

安裝​

若要設定 CDK Scroller，請先安裝 @angular/cdk

npm add @angular/cdk

這提供了一系列的各種實用工具，但我們現在將重點放在 ScrollingModule 上。

當我們要使用 CDK Scroller 時，我們需要在我們的元件中匯入模組。 例如，在標籤起始專案中，我們可以將我們的匯入新增至 tabs1.module.ts 檔案。

  import { IonicModule } from '@ionic/angular';
  import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { FormsModule } from '@angular/forms';
  import { Tab1Page } from './tab1.page';
  import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
+ import { ScrollingModule } from '@angular/cdk/scrolling';
  import { Tab1PageRoutingModule } from './tab1-routing.module';
  @NgModule({
    imports: [
      IonicModule,
      CommonModule,
      FormsModule,
      ExploreContainerComponentModule,
      Tab1PageRoutingModule,
+     ScrollingModule
    ],
    declarations: [Tab1Page]
  })
  export class Tab1PageModule {}

新增此內容後，我們可以在 Tab1Page 元件中使用虛擬滾動器。

使用方式​

透過將 cdk-virtual-scroll-viewport 新增至元件的範本，即可將 CDK 虛擬滾動器新增至元件。

<ion-content>
  <cdk-virtual-scroll-viewport> </cdk-virtual-scroll-viewport>
</ion-content>

cdk-virtual-scroll-viewport 會成為我們可滾動內容的根目錄，並負責在 DOM 節點滾出視窗時回收它們。

此時的 DOM 節點可以是應用程式所需的任何內容。 不同之處在於，當我們要反覆運算集合時，會使用 *cdkVirtualFor 而不是 *ngFor。

<ion-content>
  <cdk-virtual-scroll-viewport>
    <ion-list>
      <ion-item *cdkVirtualFor="let item of items">
        <ion-avatar slot="start">
          <img src="https://loremflickr.com/40/40" />
        </ion-avatar>
        <ion-label> {{item }} </ion-label>
      </ion-item>
    </ion-list>
  </cdk-virtual-scroll-viewport>
</ion-content>

在這裡，items 是一個陣列，但它可以是陣列、Observable<Array> 或 DataSource。 DataSource 是一個抽象類別，可以提供所需的資料以及實用方法。 如需更多詳細資訊，請查看 CDK 虛擬滾動文件。

元件尚未完成，因為 cdk-virtual-scroll-viewport 需要知道每個節點的大小以及最小/最大緩衝區大小。

目前，CDK 虛擬滾動器僅支援固定大小的元素，但未來計畫支援動態大小的元素。 對於 Tab1Page 元件，由於它僅轉譯項目，因此可以硬式編碼為固定大小。

最小/最大緩衝區大小會告知滾動器「轉譯盡可能多的節點，以滿足此最小高度，但不超過此高度」。

<cdk-virtual-scroll-viewport itemSize="56" minBufferPx="900" maxBufferPx="1350"></cdk-virtual-scroll-viewport>

在此案例中，cdk-virtual-scroll-viewport 將以 56px 的高度轉譯儲存格，直到達到 900px 的高度，但不會超過 1350px。 這些數字是任意的，因此請務必在實際用例中測試哪些值有效。

將所有內容放在一起，最終的 HTML 應如下所示

<ion-content>
  <cdk-virtual-scroll-viewport itemSize="56" minBufferPx="900" maxBufferPx="1350">
    <ion-list>
      <ion-item *cdkVirtualFor="let item of items">
        <ion-avatar slot="start">
          <img src="https://loremflickr.com/40/40" />
        </ion-avatar>
        <ion-label> {{item }} </ion-label>
      </ion-item>
    </ion-list>
  </cdk-virtual-scroll-viewport>
</ion-content>

最後需要的是一些 CSS 來正確調整視窗大小。 在 tab1.page.scss 檔案中，新增下列內容

cdk-virtual-scroll-viewport {
  height: 100%;
  width: 100%;
}

由於視窗是為符合各種使用案例而建立的，因此未設定預設大小，並由開發人員自行設定。

與 Ionic 元件一起使用​

Ionic Framework 要求折疊式大型標題、ion-infinite-scroll、ion-refresher 和 ion-reorder-group 等功能必須在 ion-content 內使用。 若要將這些體驗與虛擬滾動搭配使用，您必須將 .ion-content-scroll-host 類別新增至虛擬滾動視窗。

例如

<ion-content [scrollY]="false">
  <cdk-virtual-scroll-viewport class="ion-content-scroll-host">
    <!-- Your existing content and configurations -->
  </cdk-virtual-scroll-viewport>
</ion-content>

延伸閱讀​

這僅涵蓋了 CDK 虛擬滾動器一小部分的功能。 如需更多詳細資訊，請參閱 Angular CDK 虛擬滾動文件。

目錄

編輯此頁面