Ionic 6.1 优化虚拟滚动功能

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…