So verwenden Sie das Better-Scroll-Plugin im Projekt

Dieses Mal zeige ich Ihnen, wie Sie das Better-Scroll-Plug-In im Projekt verwenden und welche Vorsichtsmaßnahmen für die Verwendung des Better-Scroll-Plug-Ins gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Die Verwendung von Better-Scroll

Da das unendliche Scrollen auf einer festen Höhe erfolgen muss, kann ursprünglich auch CSS-Overflow-y abgeschlossen werden, bei Android jedoch nicht Sehr flüssig, aber immer noch sehr steif. Es nutzt die Drittanbieter-Bibliothek Better-Scroll und arbeitet mit Angulars NG-Content zusammen. 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: Einführung

Schreiben der Listscroll-Komponente in Angular-Cli

Laut offizieller Dokumentation, better-scroll Es 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 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 hinzugefügt, um die Ausführung zu verzögern.

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>

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 zum Thema PHP chinesische Website!

Empfohlene Lektüre:

So senden Sie eine POST-Anfrage im JSON-Format

So passen Sie den Anmeldeformularcode mit Vue an. js

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Better-Scroll-Plugin im Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!