Comment utiliser le plug-in Better-Scroll dans le projet

Cette fois, je vais vous montrer comment utiliser le plug-in better-scroll dans le projet, et quelles sont les précautions à prendre pour utiliser le plug-in better-scroll. Ce qui suit est un cas pratique, jetons un coup d'œil.

L'utilisation de better-scroll

Étant donné que le défilement infini doit être effectué à une hauteur fixe, à l'origine le débordement CSS-y peut également être complété, mais Android ne l'est pas très C'est fluide, mais toujours très rigide. Il utilise 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

partiecomponent.ts

1 : l'import introduit BScroll

2 : Initialisation dans le hook OnInit Depuis OnInit, ngFor n'a pas encore terminé son exécution, donc 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);
 }
}

Utilisez 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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez prêter attention aux autres. articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Comment envoyer une requête POST en utilisant le format JSON

Comment personnaliser le code du formulaire de connexion avec Vue. js

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!