VirtualScroll not working?

Ionic Framework ionic-v3
1

Has anyone gotten VirtualScroll to work on Ionic 2 RC 0? It is not working for me. I tried to just make the simplest possible code to demonstrate the functionality. Am I missing something or does it just not work?

Thanks,

HTML:

image
HomeHTML.png1384×1039 52.5 KB

TS:

image
HomeTS.png1384×1039 48.1 KB

Console Error:
image

2

Hello,

I have problems with virtual scroll too. I have the following error in chrome:

polyfills.js:3 Unhandled Promise rejection: Template parse errors:
Can't bind to 'virtualTrackBy' since it isn't a known property of 'ion-card'.
1. If 'ion-card' is an Angular component and it has 'virtualTrackBy' input, then verify that it is part of this module.
2. If 'ion-card' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("                    (click)="ViewArticle($event, article, null)"

                              [ERROR ->][virtualTrackBy]="id"

I try to isolate the problem.

If anyone make the virtual scroll to work, that would be a clue.

3

With a blank project, i have the same error:

EXCEPTION: Error in ./ContactPage class ContactPage - inline template:9:2 caused by: Cannot read property ‘indexOf’ of undefined
ORIGINAL EXCEPTION: Cannot read property ‘indexOf’ of undefined
ORIGINAL STACKTRACE:
TypeError: Cannot read property ‘indexOf’ of undefined

Template:

<ion-list [virtualScroll]="items">
    <ion-list-header>Follow us on Twitter</ion-list-header>
    <ion-item *virtualItem="let item">
      <ion-icon name="ionic" item-left></ion-icon>
      {{item}}
    </ion-item>

Component:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  templateUrl: 'contact.html'
})
export class ContactPage {

  public items: Array<string> = [];

  constructor(public navCtrl: NavController) {
    for(let i = 0; i < 100; i++)
    {
      this.items.push('name' +i);
    }
  }
}
4

I have posted an issue about this:

5

If someone have a workaround, it will be great.

6

@livewireml : check github, there is workaround for your error.

7

@LAFONT Thanks for posting the bug.

Yea, that workaround did fix my issue. I thought I had tried that fix before, but I guess I had another issue when I had tried it. But yea, the workaround described in the github did fix my error that I was receiving. The workaround was to just define approxItemHeight (such as approxItemHeight=“40px”) on the ion-list element.

8

It looks like VirtualScroll doesn’t work in desktop browsers when dragging the scrollbar?

For example, doing an ionic serve to Chrome, and then using the scrollbar to quickly skip to an area of the list produces whitespace.

I did apply an appropriate approxItemHeight.