イオン6.1:改良仮想スクロール互換性

イオンフレームワーク6.1は、フェードヘッダー/フッターなどの機能の組み込み機能の互換性を向上させる、無限スクロールと仮想スクロールライブラリを使用してアイテムの並べ替え.これにより、アプリケーションは、仮想スクロールのパフォーマンスとイオンからネイティブ設計の機能の恩恵を受けることができます.
と.ion-content-scroll-host クラス名、実装では、どのコンテナがスクロールするかを指定できます.イオンの多くのカスタム機能は、スクロール位置とスクロールリスナーを使用します.
以下は、反応、Vueと角度で人気の仮想スクロールライブラリのいくつかの使用例です.

反応する

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仮想スクロール)

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

角(@角/ cdk /スクロール)

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

私たちはあなたが6.1.0のリリースでは、この機能と他の値を見つけることを願っています.