Ionic Framework 6.1
版本改善了一些内置功能的兼容性,例如淡入淡出的页眉/页脚、无限滚动及虚拟滚动的条目重排序等功能。这使得应用程序可以借助于 Ionic
的原生设计功能及虚拟滚动的性能。
Ionic 6.1
版本中,虚拟滚动使用起来非常便捷,通过添加 .ion-content-scroll-host
类名,可以实现控制指定容器滚动,Ionic
中许多自定功能都使用了滚动位置及滚动监听器。
下面是来分别展示一下虚拟滚动在 React、Vue、Angular
中的使用示例。
React 使用(react-virtuoso)
const Footer = () => {
return (
<IonInfiniteScroll threshold="100px">
<IonInfiniteScrollContent></IonInfiniteScrollContent>
</IonInfiniteScroll>
)
}
const Example = () => (
<IonPage>
<IonContent fullscreen scrollY={false}>
// 定义滚动容器 ion-content-scroll-host
<Virtuoso
className="ion-content-scroll-host"
data={items}
style={{ height: "100%" }}
itemContent={(item) => <IonItem>{item}</IonItem>}
components={{ Footer }} />
</IonContent>
</IonPage>
);
Vue使用
<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 使用案例
<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>
更多讯息,请参考链接: dev.to/seanperkins…