Detaillierte Erläuterung der Schritte zur Verwendung des Better-Scroll-Plug-Ins in Angular

Dieses Mal erkläre ich Ihnen ausführlich die Schritte zur Verwendung des Better-Scroll-Plug-Ins in Angular. Was sind die Vorsichtsmaßnahmen für die Verwendung des Better-Scroll-Plug-Ins in Angular? sind praktische Fälle, werfen wir einen Blick darauf.

Die Verwendung von Better-Scroll

Da unendliches Scrollen auf einer festen Höhe erfolgen muss, kann dies auch mit dem ursprünglichen CSS overflow-y geschehen abgeschlossen werden Ja, aber Android ist nicht sehr flüssig und steif, daher verwendet es die Drittanbieter-Bibliothek Better-Scroll und arbeitet mit Angulars NG-Content zusammen. Der ng-Content von Angular ist dem Slot von Vue sehr ähnlich. Einige unsichere Inhalte können über ng-Content hineinprojiziert werden.

Installieren better-scroll

1: npm install better-scroll --save

2: Installationstyp npm install better-scroll @types/better-scroll --save

3: Einführung

Schreiben der Listscroll-Komponente in Angular-Cli

Gemäß der offiziell Aus der Dokumentation geht hervor, dass Better-Scroll Anforderungen an die Struktur des DOM stellt. Die äußerste Wrapper-Ebene muss eine feste Höhe haben und die innere Inhaltsebene wird entsprechend der Höhe des Inhalts unterstützt.

HTML-Teil:

<p class="scroll" #scroll>
 <ng-content></ng-content>
</p>

ng-content ist der Inhalt, der in

component.ts Teil

1: Import führt BScroll ein

2: Initialisierung im OnInit-Hook Da die Ausführung von ngFor während OnInit noch nicht abgeschlossen ist, wird ein Timer zur Verzögerung hinzugefügt.

import { Component, OnInit, Input, ElementRef, ViewChild } from '@angular/core';
declare let BScroll;
@Component({
 selector: 'app-listscroll',
 templateUrl: './listscroll.component.html',
 styleUrls: ['./listscroll.component.css']
})
export class ListscrollComponent implements OnInit {
 @ViewChild('scroll') scrollEl: ElementRef;
 @Input()
 private height: number;
 public scroll;
 constructor() { }
 ngOnInit() {
 
  // 设置高度
  this.scrollEl.nativeElement.style.height = `${this.height}px`; 
  
  // 初始化
  setTimeout(() => {
   this.scroll = new BScroll(this.scrollEl.nativeElement, {click: true});
  }, 20);
 }
}

Verwenden Sie die Listscroll-Komponente in anderen Komponenten

<app-listscroll [height]="height">
 <ul>
   <li class="item" *ngFor="let item of list; let num = index;">第{{num}}个</li>
 </ul>
</app-listscroll>

Zusammenfassung

Auf diese Weise kann better-scroll natürlich einfach verwendet werden. Für viele Funktionen ist auch Scrollen verfügbar, z. B. beim Laden von Pull-Ups und Pull-Downs, bei Karussellbildern usw. Weitere Informationen finden Sie in der offiziellen Dokumentation.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Welche Methoden gibt es in Angular, um eine Groß-/Kleinschreibung zu erreichen?

apply and Math.max( ) Verwendung und Unterschiede

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Verwendung des Better-Scroll-Plug-Ins in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!