Explication détaillée sur la façon d'utiliser le plug-in better-scroll (avec code)

Cette fois, je vous apporte une explication détaillée de la façon d'utiliser le plug-in better-scroll (avec code). Quelles sont les précautions lors de l'utilisation du plug-in better-scroll. Voici les informations actuelles. cas, jetons 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 :

Explication détaillée des étapes d'utilisation de l'expression el dans js

ElTableColumn ajoute une fonction de résumé de recherche

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!