ionic-frameworkionic4virtualscroll

Is Ionic Virtual Scroll very buggy or not?

I am working with Ionic 4 and trying to get Virtual Scroll to work properly with no success, for long actually.

I find the Docs very unexhaustive and with poor grammar sometimes. As at the ItemHeight part which says:

An optional function that maps each item within their height. When this function is provides, heavy optimizations and fast path can be taked by ion-virtual-scroll leading to massive performance improvements. This function allows to skip all DOM reads, which can be Doing so leads to massive performance

Now, I have no degree from Oxford, but this paragraph is plenty of mistakes, there is no clear explanation and it is confusing.

So now.

Would this ItemHeight be helpful somehow for performance or it can bring to performance issues?

Do I have any chance to get this code to work, cause till now I couldn't

((item: any, index: number) => number)

second number here looks like a typo, isn't it?

Solution

  • I think I found the solution.

    The bug was caused by ion tags inside ion-virtual-scroll

    So instead of having

    <ion-virtual-scroll [items]="list">
    <ion-card *virtualItem="let item" (click)="goTo(item)">
      ...
    </ion-card>
</ion-virtual-scroll>

    I changed my code to

    <ion-virtual-scroll [items]="list">
    <div *virtualItem="let item" (click)="goTo(item)">
      ...
    </div>
</ion-virtual-scroll>

    which seems to work fine, even with items with different heights and with no

    approxItemHeight

    attribute definition