Introduction à la méthode d'utilisation du plug-in Better-Scroll dans Angular

Cet article présente principalement comment utiliser le plug-in better-scroll dans Angular. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

L'utilisation de better-scroll

Le défilement infini devant être effectué à une hauteur fixe, le débordement-y du CSS peut également être complété, mais Android n'est pas très fluide et est toujours très 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, et du contenu incertain peut y être projeté via ng-content.

Installer better-scroll

1 : npm install better-scroll --save

2 : Installer les types npm installer better-scroll @types/ better-scroll --save

3 : Introduisez

dans angulaire-cli et écrivez le composant listscroll

Selon la documentation officielle, mieux- scroll a des exigences pour la structure 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 le

composant .ts part

1 : import introduit BScroll

2 : Initialiser dans le hook OnInit Depuis OnInit, ngFor n'a pas encore été exécuté, donc une minuterie est ajoutée au délai.

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 peut être facilement utilisé. Bien sûr, better-scroll a également de nombreuses fonctions. Vous pouvez compter sur lui pour charger le pull-down et le pull. -des images vers le bas, créer des images de carrousel, etc. etc. Pour plus de détails, veuillez vous référer à la documentation officielle.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de l'installation et de l'utilisation du composant de téléchargement d'images vux uploader

Comment développer rapidement des applications avec vue Outils d'échafaudage

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!