Virtual Scroll with StencilJS without Angular/React

Stencil
1

Hello guys,

can any one provide an example of Virtual Scroll with StencilJS without Angular/React?

It’s missing in the docs and I cannot find the correct syntax to set the virtualItem property when you work without Angular or React

//angular exmple...
<ion-virtual-scroll [items]="items">
  <ion-item *virtualItem="let item">
    {{ item }}
  </ion-item>
</ion-virtual-scroll>

Thanks! F.

1 Like
2

It work for anything other than React or Angular.

3

@fabiobeoni, did you come across a solution?

4

Hi Monica,

I went for a Vanilla implementation :slight_smile:

https://github.com/sergi/virtual-list

https://github.com/tbranyen/hyperlist

2 Likes
5

Thanks you @fabiobeoni for sharing these with me :slight_smile:

6 
@State() contentData: IContent[] = [];

listItemTemplate(item: IContent, index: number) {
    return (
        <ion-card>
            <ion-card-header>
                <ion-card-title>{item.Title}</ion-card-title>
            </ion-card-header>
            <ion-card-content>Hello World</ion-card-content>
        </ion-card>
    );
}

<ion-content id="content">
    <ion-virtual-scroll items={this.contentData} renderItem={(e, i) => this.listItemTemplate(e, i)} itemHeight={() => 110}></ion-virtual-scroll>
</ion-content>