Virtual Scroll with StencilJS without Angular/React

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 }}

Thanks! F.

1 Like

It work for anything other than React or Angular.

@fabiobeoni, did you come across a solution?

Hi Monica,

I went for a Vanilla implementation :slight_smile:


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

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

listItemTemplate(item: IContent, index: number) {
    return (
            <ion-card-content>Hello World</ion-card-content>
<ion-content id="content">
    <ion-virtual-scroll items={this.contentData} renderItem={(e, i) => this.listItemTemplate(e, i)} itemHeight={() => 110}></ion-virtual-scroll>