Virtual scroll and approxItemHeight. How to use it?

Ionic Framework ionic-v3
1

is this how you use virtual scroll: [approxItemHeight]=“500px” property?

Because I have tried:
a.

        <ion-list [virtualScroll]="newArray" [approxItemHeight]="500px" [bufferRatio]="3.1">
            <button  *virtualItem="#item" large>
                ItemName
            </button>
        </ion-list>

b.

        <ion-list [virtualScroll]="newArray" [approxItemHeight]="500" [bufferRatio]="3.1">
            <button  *virtualItem="#item" large>
                ItemName
            </button>
        </ion-list>

c.

        <ion-list [virtualScroll]="newArray" [bufferRatio]="3.1">
            <button  [approxItemHeight]="500px"  *virtualItem="#item" large>
                ItemName
            </button>
        </ion-list>

and I haven’t any luck making this work.

2

I can’t get any of the properties in the docs to work aside from bufferRatio.

plz help

3

Figured out this crap.
When doing this:

    <ion-list [virtualScroll]="newArray" [approxItemHeight]="500px" [bufferRatio]="3.1">
        <button  *virtualItem="#item" large>
            ItemName
        </button>
    </ion-list>

because the 500px is supposed to be a string you have to write the ’ ’ inside the " " in other words this will fix it:

    <ion-list [virtualScroll]="newArray" [approxItemHeight]=" '500px' " [bufferRatio]="3.1">
        <button  *virtualItem="#item" large>
            ItemName
        </button>
    </ion-list>

notice the ’ ’ inside the " ".

" ‘500px’ "

7 Likes
4

Hello there, this sounds interesting but can’t get it to work. Does this work out-of-the box with Ionic 2?? Can’t find it in the docs??

5

It is in the docs for v2.

You have to have at least ionic-angular 2.0.0-beta.4 installed.

6

I have, but searching the docs didn’t gave me any results, thanks for you link and reply!

1 Like
7

Well done! Thank you very much.

1 Like
8

When the approxItemHeight is set the first item in the list is initially rendered on the second items’ position. After the scroll is moved it is positioned correctly.

transform: translate3d(0px, 281px, 0px); - this is the initial value of the first item.

9

holy crap… it works!