web-dev-qa-db-fra.com

cdk-virtual-scroll-viewport avec des hauteurs d'élément variables

Je voudrais utiliser cdk-virtual-scroll-viewport dans une vue TimeLine avec des éléments de différentes hauteurs.

Donc, en définissant itemSize="x" qui, selon la documentation, fait référence à La taille des éléments de la liste (en pixels), n'est pas pratique.

autosize n'est pas encore disponible.

Est-il possible d'utiliser le défilement virtuel/sans fin avec cdk-virtual-scroll-viewport avec différentes tailles d'articles?

Mise à jour

Je cherchais des solutions alternatives de défilement virtuel/sans fin et, je peux à peine croire, il semble qu'il existe une solution non qui fonctionne avec la hauteur de ligne dynamique, même avec https: // github .com/rintoj/ngx-virtual-scroller ce n'est pas recommandé.

Mise à jour 2, juillet 2019

Puisqu'il n'y a toujours pas de solution, je pense que la manière "assez bonne" de contourner ce problème serait de charger un nombre fixe d'éléments et d'ajouter un bouton pour charger plus d'éléments en bas de la liste, comme dans cet exemple: https://stackblitz.com/edit/ang-mat-load-more

angularangular7virtualscroll
5
yglodt

itemSize = "x" n'aide pas à définir la hauteur ... vous devez utiliser CSS pour attribuer vous-même une hauteur arbitraire.

en venant à votre question, les tailles d'éléments variables ne devraient pas être un problème avec le défilement virtuel ... vous pouvez changer le tableau dans cet exemple pour voir la possibilité et les résultats très rapidement.

1
Akber Iqbal

Jusqu'à ce que cette fonctionnalité soit proposée dans le CDK, je l'ai contourné en écoutant l'événement onscroll de l'élément natif, puis je réponds lorsque le décalage de défilement vers le bas est de 0

@ViewChild(CdkVirtualScrollViewport, { static: false })
public virtualScrollViewport?: CdkVirtualScrollViewport;

...

ngAfterViewInit() {
  this.virtualScrollViewport.elementRef.nativeElement.onscroll = (e) => { this.onScroll(e) };
}

onScroll(e) {
  var scrollOffset = this.virtualScrollViewport.measureScrollOffset("bottom");

  if (scrollOffset == 0) {
    this.fetchMoreData();
  }
}
0
Richard Medeiros