Virtuelles Scrollen

Erweitern Sie einen vorhandenen virtuellen CDK-Scroll-Viewport um scrollabhängige Header. Beginnen Sie mit IonContent für das Header-/Safe-Area-Muster und ersetzen Sie anschließend den Scroll-Host durch einen Viewport. Verwenden Sie dies nach der Installation.

import { Component } from '@angular/core';
import { CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular';
import { VirtualScrollHeaderDirective } from '@rdlabo/ionic-angular-scroll-header';

@Component({
  selector: 'app-virtual-scroll-header',
  imports: [
    IonContent,
    IonHeader,
    IonToolbar,
    IonTitle,
    CdkVirtualScrollViewport,
    CdkVirtualForOf,
    CdkFixedSizeVirtualScroll,
    VirtualScrollHeaderDirective,
  ],
  template: `
    <ion-header class="hidden">
      <ion-toolbar></ion-toolbar>
    </ion-header>
    <ion-content rdlaboVirtualScrollHeader>
      <ion-header>
        <ion-toolbar>
          <ion-title>Virtual scroll header</ion-title>
        </ion-toolbar>
      </ion-header>
      <cdk-virtual-scroll-viewport
        minBufferPx="900"
        maxBufferPx="1350"
        [itemSize]="44"
        class="ion-content-scroll-host"
      >
        <div *cdkVirtualFor="let item of items; trackBy: trackByFn" style="height: 44px">
          {{ item }}
        </div>
      </cdk-virtual-scroll-viewport>
    </ion-content>
  `,
})
export class VirtualScrollHeaderPage {
  readonly items = Array.from({ length: 80 }, (_, index) => `Row ${index + 1}`);
  trackByFn = (_: number, item: string) => item;
}

Geben Sie dem Viewport mit dem globalen CSS aus der Installation eine feste Höhe.

Scrollsprünge und Flackern am oberen Rand verhindern

Behebt das in angular/components#27104 beschriebene Zurückspringen eines vorhandenen CDK-Viewports beim Scrollen.

Ergänzen Sie die Direktive in den imports der oben gezeigten Komponente und fügen Sie ihr Attribut dem vorhandenen Viewport hinzu. Behalten Sie die CDK-Importe und Daten dieses Beispiels bei.

import { FixVirtualScrollElementDirective } from '@rdlabo/ionic-angular-scroll-header';

<ion-content>
  <cdk-virtual-scroll-viewport
    rdlaboFixVirtualScrollElement
    minBufferPx="900"
    maxBufferPx="1350"
    [itemSize]="44"
    class="ion-content-scroll-host"
  >
    <div *cdkVirtualFor="let item of items; trackBy: trackByFn" style="height: 44px">
      {{ item }}
    </div>
  </cdk-virtual-scroll-viewport>
</ion-content>

Diese Seite auf GitHub bearbeiten