Ausführliche Erklärung zur Verwendung des Better-Scroll-Plug-Ins (mit Code)

Dieses Mal erkläre ich Ihnen ausführlich, wie Sie das Better-Scroll-Plugin verwenden (mit Code). Welche Vorsichtsmaßnahmen sind bei der Verwendung des Better-Scroll-Plugins zu beachten? Fälle, werfen wir einen Blick darauf.

Better-Scroll verwenden

Da unendliches Scrollen auf einer festen Höhe erfolgen muss, kann auch das ursprüngliche CSS

overflow-y

durchgeführt werden Da Android jedoch nicht sehr flüssig und steif ist, nutzt 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-scroll1: 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

projiziert wird

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:

Detaillierte Erläuterung der Schritte zur Verwendung des el-Ausdrucks in js

ElTableColumn fügt eine Suchzusammenfassungsfunktion hinzu

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung des Better-Scroll-Plug-Ins (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!