Ionic 3 – Using the VirtualScroll Component

I’ve built a sample application using the basic ionic Conference App with some tweaks. You can find the source here: https://github.com/jarodms/ionic3-virtual-scroll

Once you’ve cloned/downloaded the source, run the following to see the example in action (go to the Speakers tab):

The example app has the following:

Take a look in 'src/pages/speaker-list/speaker-list.html' for the example of using a VirtualScroll Component. You’ll see I have:

1. <ion-list> as a child of <ion-content>
   1. <ion-list> sets the property [virtualScroll] to my array of speakers
2. approxItemHeight is set to 85px. After deciding the pieces of data I wanted in each item, I used a tool to determine the number of pixels that I think I need. The default is 40px, so if you can get this number more accurate (“if significantly larger than the default”) then it will help with rendering.
3. <ion-item> as a child of <ion-list>
   1. <ion-item> uses an item template with the *virtualItem property
4. The children of <ion-item> are the various fields of a speaker that I want to display

So here’s what happens…

When the view is rendered, a small subset of items will be rendered, not the entire array of speakers. How do you know? Open your developer tools or inspect one of the items in the view. As you scroll down you will see the number of elements in the DOM under <ion-list> stay approximately the same; however the content of the items changes as you scroll. Nice!

For more options and usage of VirtualScroll, see the official Ionic documentation: https://ionicframework.com/docs/api/components/virtual-scroll/VirtualScroll/

Please follow: