Erste Schritte

Virtuelles Scrollen mit Angular CDK und variablen oder dynamischen Elementhöhen.

@rdlabo/ngx-cdk-scroll-strategies ist eine virtuelle Angular-CDK-Scrollstrategie für Listen mit variablen Elementhöhen. Sie erlaubt die Angabe der exakten Pixelgröße jedes Elements, statt einen einzigen festen Wert [itemSize] für die gesamte Liste zu verlangen.

Verwenden Sie [itemDynamicSizes] mit bekannten oder gemessenen Elementhöhen. Anders als die experimentelle Strategie [autosize] schätzt diese Bibliothek ungemessene Elemente nicht anhand einer Durchschnittsgröße. Sie arbeitet mit @angular/cdk/scrolling und hängt nicht von Ionic ab.

Installation

npm install @rdlabo/ngx-cdk-scroll-strategies

Folgen Sie anschließend Einfache Verwendung, um einen vollständigen Viewport mit bekannten Höhen zu erstellen.

Jedes Datenelement benötigt einen entsprechenden Eintrag in itemDynamicSizes in derselben Reihenfolge. Jeder Wert itemSize muss eine endliche Zahl größer als null sein. Aktualisiert Angular Daten- und Größensignals in getrennten Durchläufen, behält die Strategie die letzte vollständige Geometrie bei, bis ihre Längen übereinstimmen. Unbekannte Höhen werden niemals geschätzt.

Wann diese Strategie geeignet ist

Verwenden Sie diese Bibliothek, wenn:

• Listenelemente oder Zeilen unterschiedliche Höhen haben;
• dynamische Elementhöhen aus Daten berechnet oder an gerenderten Komponenten gemessen werden können;
• scrollToIndex und Scrollpositionen die exakte Geometrie variabler Höhen verwenden müssen; oder
• eine Chat-Oberfläche umgekehrtes virtuelles Scrollen benötigt.

Wenn eine Elementhöhe nicht im Voraus bekannt ist, messen Sie sie und übergeben Sie das Ergebnis wie unter Erweiterte Verwendung gezeigt. Die Strategie kann nicht einfach eingesetzt werden, um jede unbekannte DOM-Höhe automatisch zu ermitteln.

Diese Bibliothek basiert zu einem großen Teil auf Virtuelles Scrollen von Inhalten mit variabler Höhe in Angular.

Nach Scrollziel auswählen