Multiple virtualScroll's inside the same ion-content element

Ionic Framework ionic-v3
1

Perhaps what I am trying to accomplish is not doable, or perhaps not even recommended.

Here is my use case:

I have an ion-segment with 4 segments. Below this segment is where a list must display depending on the currently selected segment. Currently I have severe performance degradations no matter what approach I follow.

Whether I do:

<ion-list [virtualScroll]="items1" [approxItemHeight]="'30px'" *ngIf="isSegmentVisible(0)">
<ion-list [virtualScroll]="items2" [approxItemHeight]="'30px'" *ngIf="isSegmentVisible(1)">
<ion-list [virtualScroll]="items3" [approxItemHeight]="'30px'" *ngIf="isSegmentVisible(2)">
<ion-list [virtualScroll]="items4" [approxItemHeight]="'30px'" *ngIf="isSegmentVisible(3)">

or whether I do:

<ion-list [virtualScroll]="items1" [approxItemHeight]="'30px'" [hidden]="!isSegmentVisible(0)">
<ion-list [virtualScroll]="items2" [approxItemHeight]="'30px'" [hidden]="!isSegmentVisible(1)">
<ion-list [virtualScroll]="items3" [approxItemHeight]="'30px'" [hidden]="!isSegmentVisible(2)">
<ion-list [virtualScroll]="items4" [approxItemHeight]="'30px'" [hidden]="!isSegmentVisible(3)">

I still have severe performance issues, especially on Android, even when I just load 10 items per list at first (40 items in total).

Do note that the latter example doesn’t even work because the visual placement of the lists (after the first one has displayed) are incorrect.

I change a boolean when tapping on a segment in order for the isSegmentVisible method to do the right thing.

Perhaps I am completely on the wrong path here, but I would hate to change my visual design if there are no other options with Ionic. I hope somebody can steer me in the right direction.

Do note these lists use pulldown-refresh, and idea would be to use infinite scroll as well. Does this make the virtualscroll usage even a worse idea?

Regards

1 Like
2

Pull to refresh doesn’t currently work correctly with virtualscroll on ios.

There is also an open issue for virtualscroll within a segment where it will display blank or not at all.

I believe that infinite scroll doesn’t work together with virtualscroll either. But with virtualscroll there should basically be no need for paged results in the list.