ionic-framework: Ionic2 Segment and Virtual Scroll don't work together properly

@vong-xiv @jeronimonascimento Have you tried replacing *ngSwitchCase with [hidden]? It worked in our case:

<ion-content class="has-header">
    <div [hidden]="sgm !== 'sgm1'">
        <ion-list  [virtualScroll]="items1">
            <ion-item *virtualItem="let item">
                {{ item }}
            </ion-item>
        </ion-list>
    </div>

    <div [hidden]="sgm !== 'sgm2'">
        <ion-list  [virtualScroll]="items2">
            <ion-item *virtualItem="let item">
                {{ item }}
            </ion-item>
        </ion-list>
    </div>
</ion-content>

this still exists. Here is a screencap of how a simple virtualscroll list works in a segment (same in any kind of conditional) today with ionic 3.3.0. It is 100% unusable.

In the attached screen cap the virtualscroll list is about 100 items, more than enough to fill the screen but the initial display when entering the view for the first time only displays the first couple of items in the list.

Upon scrolling the display flickers, goes blank, flashes up briefly some of the scrolling items, then they disappear. When I scroll back up I get gaps, blanks and flickering again.

Finally if I navigate to another segment and then come back the list is not displayed at all, there is nothing there, you cannot scroll to try and it to show something it is just not rendered.

You can see a brief scroll of a short list on one of the other segments showing it performs normally with ngFor as long as the list is not big enough to slow it down.

This is a major issue that makes virtualscroll combined with any kind of conditional wrapper (including very normal cases like a segment) completely 100% unusable. Having to use ngFor in these sections means that my app performs very poorly as people build up longer lists, this is resulting in significant negative feedback on my app.

Please (and I don’t know how else I can beg at this point) can you look at virtual scroll and actually make it useable? I consider myself lucky that I have managed to even release my app on iOS at this point after making many concessions but I am receiving regular negative feedback about performance due to areas where I have to revert to ngFor with longer lists due to bugs like this.

Ionic team is currently reviewing https://github.com/ionic-team/ionic/pull/12917 which should fix many of the problems here 🎉

Also running into the same issue as @ghenry22.

can anyone suggest any alternatives ???

Almost year passed 😃

Any news on this??

This issue still exists on 2.2.1. Please, give us a solution. The virtualScroll only shows the first time i open the page, but when i navigate between the segment my virtualScroll disapear.

`<div [ngSwitch]=“visaoFiltro”>

  <ion-list [virtualScroll]="listaFiltro" *ngSwitchCase="'verLista'"  [approxItemHeight]=" '100px'">
    <ion-item-sliding *virtualItem="let leito">
      <ion-item floating (click)="confirmarTarefa(leito)">
        <ion-grid>
          <ion-row>
            <ion-col width-25>
              <button ion-fab color="danger">
                <ion-icon name="alert"></ion-icon>
              </button>
            </ion-col>
            <ion-col>
              <h2>{{'leito'| translate}}: {{leito.descricaoResumo}}</h2>
              <h3>{{'tipo'| translate}}: {{leito.descricaoTipoAcomodacao}}</h3>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-item>
      <ion-item-options side="right">
        <button ion-button color="blue" (click)="confirmarTarefa(leito)">
            <ion-icon name="checkmark"></ion-icon>
            {{'iniciar'| translate}}
        </button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

  <div *ngSwitchCase="'verGrafico'">
    Gráfico selecionado
  </div>

</div>`

I think activity on virtual scroll is important than adding new features…I hope ionic team will recognise this…Virtual scroll is ready required for real production apps as data is growing massive.

I’m having the same issue too. 😭 @jonaszuberbuehler solution helped me but I don’t think it’s the good way.

Any updates from the Ionic Team would be very appreciated!

having same issue

Here is some more detail on this:

When first entering a view with virtualscroll list in a segment:

on first enter the view is blank and the list has the class virtual-scroll but no height. Scrolling slightly I see all the list items pop into the dom.

then all is displaying and scrolling fine and the list has the class virtual-scroll and a height.

When I navigate to a different segment and then come back the page is blank, no list displayed. scrolling makes no change. Inspecting the dom shows that the virtual-scroll list has the class virtual-loading attached to it but NOT the classes virtual-scroll or a height. It seems that it gets stuck in some sort of loading state.

It’s now around 10 months since this issue was logged, it would be nice to have virtual-scroll working a little better within a year. Basic scroll functionality when used inside a segment or other conditional is pretty essential and nothing unusual. Similarly working properly when combined with the refresher component would be nice as they are both core ionic components and features and it is a very normal mainstream use case we are looking at.

I have attached screenshots from the safari inspector for each of the states above to help make them clear.

@manucorporat @jgw96 Maybe this info around the classes attached to the list could help to narrow this one down? PLEASE can someone look at some of the virtualscroll bugs.

I am seeing the same symptoms on RC3. I have noticed that it works fine as long as the virtualScroll element isn’t nested within any other directives (ngIf, ngSwitch etc).