I’m writing a (beautiful ;-)) app to manage the content of my cellar. Among features I can list the bottles in it, and because I can have quite a lot of bottles to drink (say, 1500 or so), I’m using virtual-scroll in order to get optimal performances when displaying this. So I’m using something like
<ion-list sliding="true" class="bottle-page" [virtualScroll]="bottles" #bottleList> <div *virtualItem="let bottle" style="width: 100%"> <bottle-item [bottle]="bottle" (showDetail)="triggerDetail($event)" (selected)="switchSelected($event)"></bottle-item> </div> </ion-list>
I’m trying to have the “pyjama effect”, I mea rows with alternative background colors white / light grey. And that’s where I have the issue, I have sometimes several white rows, then sometimes light grey rows. When inspecting the DOM I can see that rows are not displayed in the same order as in the DOM, is it the normal behavior of the virtualScroll stuff ? OK it’s fast and that’s what I’m looking for, but the result is rather ugly on my phone…
Any idea on how to do this ?