Ionic Framework 6.1 improves built-in feature compatibility for features such as fade header/footers, infinite scroll and item reordering with virtual scroll libraries. This allows applications to benefit from native designed features from Ionic with the performance of virtual scrolling.
With the .ion-content-scroll-host classname, implementations can specify which container is responsible for scrolling. Many custom features in Ionic make use of the scroll position and scroll listeners.
Below are a few usage examples for popular virtual scrolling libraries in React, Vue and Angular.
React (react-virtuoso)
const Footer = () => {
return (
<IonInfiniteScroll threshold="100px">
<IonInfiniteScrollContent></IonInfiniteScrollContent>
</IonInfiniteScroll>
)
}
const Example = () => (
<IonPage>
<IonContent fullscreen scrollY={false}>
<Virtuoso
className="ion-content-scroll-host"
data={items}
style={{ height: "100%" }}
itemContent={(item) => <IonItem>{item}</IonItem>}
components={{ Footer }} />
</IonContent>
</IonPage>
);
Vue (vue-virtual-scroller)
<template>
<ion-page>
<ion-content :fullscreen="true" :scroll-y="false">
<RecycleScroller
class="ion-content-scroll-host scroller"
:items="items"
:item-size="50"
>
<template v-slot="{ item }">
<ion-item>{{ item }}</ion-item>
</template>
<template #after>
<ion-infinite-scroll threshold="100px">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</template>
</RecycleScroller>
<ion-content>
</ion-page>
</template>
<style scoped>
.scroller {
height: 100%;
}
</style>
Angular (@angular/cdk/scrolling)
<ion-content [fullscreen]="true" [scrollY]="false">
<cdk-virtual-scroll-viewport itemSize="50" class="ion-content-scroll-host">
<ion-item *cdkVirtualFor="let item of items">
{{ item }}
</ion-item>
<ion-infinite-scroll threshold="100px">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</cdk-virtual-scroll-viewport>
</ion-content>
We hope that you find value in this feature and others in the 6.1.0 release.
Top comments (0)