Comment utiliser le plug-in Better-Scroll dans Angular_AngularJS

Cet article présente principalement comment utiliser le plug-in better-scroll dans Angular. Maintenant, je le partage avec vous et le donne 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>

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Une brève introduction à l'écriture ajax par vous-même sans bibliothèque (framework)

Une brève analyse des résultats de la requête Ajax d'IE Problème de mise en cache

Comment résoudre l'erreur 403 lorsque Django utilise les données de publication ajax

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!