In diesem Artikel wird hauptsächlich die Verwendung des Better-Scroll-Plug-Ins in Angular vorgestellt. Jetzt teile ich es mit Ihnen und gebe es als Referenz.
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>Das Obige Ich habe es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.
Verwandte Artikel:
Eine kurze Einführung in das Schreiben von Ajax ohne Bibliothek (Framework)
Eine kurze Analyse von IEs Ajax-Anfrageergebnisse Caching-Problem
So lösen Sie den 403-Fehler, wenn Django Ajax-Postdaten verwendet
Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Better-Scroll-Plug-in in Angular_AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
