Einführung in die Methode zur Verwendung des Better-Scroll-Plug-Ins in Angular

In diesem Artikel wird hauptsächlich die Verwendung des Better-Scroll-Plug-Ins in Angular vorgestellt. Der Inhalt ist ziemlich gut und wird als Referenz dienen.

Die Verwendung von Better-Scroll

Da das unendliche Scrollen auf einer festen Höhe erfolgen muss, kann auch der Überlauf von CSS abgeschlossen werden. aber was? Android ist nicht sehr flüssig und immer noch sehr steif, daher nutzt es die Drittanbieter-Bibliothek Better-Scroll und kooperiert mit Angulars NG-Content. Der ng-Content von Angular ist dem Slot von Vue sehr ähnlich, und einige unsichere Inhalte können über ng-Content darauf projiziert werden.

Better-Scroll installieren

1: npm install better-scroll --save

2: Typen installieren npm install better-scroll @types/ better-scroll --save

3: Füge

in angle-cli ein und schreibe die Listscroll-Komponente

Laut der offiziellen Dokumentation ist better-scroll --save Für Scroll gelten Anforderungen an die DOM-Struktur. 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 projiziert werden soll Teil

1: Import führt BScroll ein

2: Initialisierung im OnInit-Hook Da OnInit die Ausführung von ngFor noch nicht abgeschlossen hat, wird der Verzögerung ein Timer 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 problemlos verwendet werden. Natürlich können Sie sich darauf verlassen, dass Pull-Down- und Pull-Down-Bilder geladen werden. Erstellen Sie Karussellbilder usw., die Sie in der offiziellen Dokumentation finden können.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Informationen zur Installation und Verwendung der Vux-Uploader-Bild-Upload-Komponente

So entwickeln Sie schnell Apps mit vue Scaffolding Tools

Das obige ist der detaillierte Inhalt vonEinführung in die Methode zur Verwendung des Better-Scroll-Plug-Ins in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!