Ionic 2 - virtual scrolling does not work as expected

Question

I don't know why the virtual scrolling that I implemented looks weird.

I have a list of words, and I want to show them on the page. I previously repeated these words using a for loop, but the scroll performance was terrible on Android devices. Therefore, I decided to implement basic virtual scrolling, as indicated in the official documentation for Iran.

http://rhymebrain.com/talk?function=getRhymes&word=baby

This is the data I'm trying to repeat. I need only words, no other information.

The code for my virtual scroll is as follows:

<ion-card *ngIf="words?.length > 0"> <ion-card-header>rhymes with...</ion-card-header> <ion-card-content> <ion-list [virtualScroll]="words" [approxItemHeight]=" '500px' "> <button *virtualItem="let word" ion-button round small> {{word.word}} </button> </ion-list> </ion-card-content> </ion-card> 

In my web browser, the results I got are terrible. I will talk about some screens:

Pic 1 : the user searches for a word to extract all rhymes, but the data is not displayed, even if the answer is not zero.

Pic 2 . If I go to another page and return, I see a few rhymes.

Pic 3 . If I repeat step 2 or scroll down a bit, I see a few words. It looks weird.

I have no idea why the virtual scroll acts like this. Can someone tell me what mistake I made, or the best solution for this?

early

Answer 1

There are several problems with virtual scrolling, which, unfortunately, are not documented. Correcting all of this should lead you in the right direction.

Predefined height

All the ancestors of your [virtualScroll] must have a predefined height. The virtual list will capture the height of the elements and based on this fill the cells. If the height is 0, it fills only a few cells that quickly fill the scroll buffer space. Do not use inline CSS, but an example is provided for simplicity.

 <ion-content> <div style="height:100%"> <ion-list [virtualScroll]="items" approxItemHeight="50px"> ... </ion-list> </div> </ion-content> 

Determine the approximate height of the element

In the above example, you see that I am setting approxItemHeight . This is an important step that helps the virtual list with its calculations.

Do not embed in expression

Unfortunately, you cannot put your virtual scroll on the ngIf , ticket. Your virtual scroll needs to be visualized at the beginning of the component life cycle. Therefore, if you wrapped your virtual scroll inside a condition that has been true since the time of the constructor, the problem will not exist. However, if at some point later the condition becomes true, you will have to redesign your implementation.

What I did for this is to switch from using *ngIf to using [ngClass]="virtualClass" . When I want to hide virtual scrolling, I will set virtualClass = 'virtual-hide' .

 .virtual-hide { overflow: hidden; visibility: hidden; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } 

You cannot use display: none , as this will not increase the height of the virtual scrolls, the same problem that we want to solve. The above CSS should allow the element to be on the screen and take up the right amount of space until it actually appears. Perhaps this code needs to be adjusted based on your implementation.

Ensure availability of items

Switching to using ngClass from ngIf will mean that your virtual scroll is always in the DOM. Because of this, you must ensure that items (the array for [virtualScroll] ) are always set. So make sure it has never been undefined or null , instead set it to [] if you want it to be empty.