One virtual scrolling solution to consider for your Ionic Vue app isvue-virtual-scroller. This guide will go over how to installvue-virtual-scroller into your Ionic Vue application and use it with other Ionic components.

Installation​

To setup the virtual scroller, first installvue-virtual-scroller:

npm install vue-virtual-scroller@next

From here, we need to import the virtual scroller's CSS into our app. Inmain.ts, add the following line:

import'vue-virtual-scroller/dist/vue-virtual-scroller.css';

Registering Virtual Scroll Components​

Now that we have the package installed and the CSS imported, we can either import all virtual scroll components or only import the components we want to use. This guide will show how to do both.

Installing all Components​

To install all virtual scroll components for use your app, add the following import tomain.ts:

importVueVirtualScrollerfrom'vue-virtual-scroller';

Next, we need to install this in our Vue application:

app.use(VueVirtualScroller);

After doing this, all virtual scroll components will be available for use in our app.

Installing Specific Components​

To install specific virtual scroll components for use in your app, import the component you want to use inmain.ts. In this example, we will be using theRecycleScroller component:

import{RecycleScroller}from'vue-virtual-scroller';

Next, we need to add the component to our Vue application:

app.component('RecycleScroller',RecycleScroller);

After doing this, we will be able to use theRecycleScroller component in our app.

Usage​

This example will use theRecycleScroller component which only renders the visible items in your list. Other components such asDynamicScroller can be used when you do not know the size of the items in advance.

TheRecycleScroller component should be added inside of yourion-content component:

<template>
<ion-page>
<ion-content>
<ion-list>
<RecycleScrollerclass="scroller":items="list":item-size="56">
<template#default="{ item }">
<ion-item>
<ion-avatarslot="start">
<imgsrc="https://picsum.photos/seed/picsum/40/40"/>
</ion-avatar>
<ion-label>{{ item }}</ion-label>
</ion-item>
</template>
</RecycleScroller>
</ion-list>
</ion-content>
</ion-page>
</template>

<script>
import{ defineComponent, ref}from'vue';
import{IonAvatar,IonContent,IonItem,IonLabel,IonPage}from'@ionic/vue';

exportdefaultdefineComponent({
components:{
IonAvatar,
IonContent,
IonItem,
IonLabel,
IonPage,
},
setup(){
const list=ref([0,1,2,3,4,5,6,7,8,9,10]);

return{ list};
},
});
</script>

There are two important pieces we need to account for in order forRecycleScroller to work. First, we need to provide it with an array of data to iterate over via theitems property. In this case, we have an array calledlist which provides our data. Second, we need to provide the size of each node via theitem-size property. If you do not know the size of the node ahead of time, you should use theDynamicScroller component instead.

Now that our template is setup, we need to add some CSS to size the virtual scrolling viewport correctly. In astyle tag in your component, add the following:

.scroller{
height:100%;
}

Usage with Ionic Components​

Ionic Framework requires that features such as collapsible large titles,ion-infinite-scroll,ion-refresher, andion-reorder-group be used within anion-content. To use these experiences with virtual scrolling, you must add the.ion-content-scroll-host class to the virtual scroll viewport.

For example:

<template>
<ion-page>
<ion-content:scroll-y="false">
<RecycleScrollerclass="ion-content-scroll-host scroller">
<!-- Your existing content and configurations -->
</RecycleScroller>
</ion-content>
</ion-page>
</template>

Further Reading​

This guide only covers a small portion of whatvue-virtual-scroller is capable of. For more details, please see thevue-virtual-scroller documentation.

• Installation
• Registering Virtual Scroll Components
  • Installing all Components
  • Installing Specific Components
• Usage
• Usage with Ionic Components
• Further Reading