Explication détaillée des étapes pour utiliser le plug-in better-scroll dans Angular

Cette fois, je vais vous donner une explication détaillée des étapes d'utilisation du plug-in better-scroll dans Angular. Quelles sont les précautions pour utiliser le plug-in better-scroll dans Angular Ici. sont des cas pratiques, jetons-y un coup d'oeil.

Utiliser better-scroll

Étant donné que le défilement infini doit être effectué à une hauteur fixe, le CSS original overflow-y peut également être effectué Oui, mais Android n'est pas très fluide et rigide, il utilise donc la bibliothèque tierce pour un meilleur défilement et coopère avec le contenu ng d'Angular. Le contenu ng d'Angular est très similaire au slot de Vue. Certains contenus incertains peuvent y être projetés via ng-content.

Installer better-scroll

1 : npm install better-scroll --save

2 : Type d'installation npm install better-scroll @types/better-scroll --save

3 : Introduire l'

l'écriture du composant listsscroll dans angulaire-cli

Selon le officiel Il ressort de la documentation que better-scroll a des exigences pour la structure du DOM. La couche wrapper la plus externe doit avoir une hauteur fixe et la couche interne de contenu est prise en charge en fonction de la hauteur du contenu.

partie html :

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

ng-content est le contenu à projeter dans

partiecomponent.ts

1 : l'import introduit BScroll

2 : Initialiser dans le hook OnInit Puisque ngFor n'a pas fini de s'exécuter pendant OnInit, un timer est ajouté pour le retarder.

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);
 }
}

Utiliser le composant listscroll dans d'autres composants

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

Résumé

De cette façon, better-scroll est simplement utilisé, et bien sûr, better -scroll a également de nombreuses fonctions. Vous pouvez compter sur lui pour effectuer des chargements pull-up et déroulants, des images de carrousel, etc. Pour plus de détails, veuillez vous référer à la documentation officielle.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Quelles sont les méthodes dans Angular pour réaliser la conversion de la casse des lettres

apply et Math.max( ) Utilisation et différences

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!