使用Ionic React实现的无限滚动效果

import {
  IonContent, IonHeader, IonPage,
  IonTitle, IonCard, IonToolbar} from '@ionic/react';
import React, {useState} from 'react';
const Tab1: React.FC = () => {
  const [items, setItems] = useState<string[]>([]);
  const [disableInfiniteScroll, setDisableInfiniteScroll] =
        useState<boolean>(false);
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Tab One</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        {items.map((item: string, i: number) => {
           return <IonCard key={`${i}`}><img src={item}/>
                  </IonCard>
        })}
      </IonContent>
    </IonPage>
  );
};

async function fetchData() {
  const url: string = 'https://dog.ceo/api/breeds/image/random/10';

  const res: Response = await fetch(url);
  res
      .json()
      .then(async (res) => {
        if (res && res.message && res.message.length > 0) {
          setItems([...items, ...res.message]);
          setDisableInfiniteScroll(res.message.length < 10);
        } else {
          setDisableInfiniteScroll(true);
        }
      })
      .catch(err => console.error(err));
}

import {useIonViewWillEnter} from '@ionic/react';
const Tab1: React.FC = () => {
  useIonViewWillEnter(async () => {
    await fetchData();
  });
};

async function searchNext($event: CustomEvent<void>) {
    await fetchData();
    ($event.target as HTMLIonInfiniteScrollElement).complete();
}

import {IonInfiniteScroll, IonInfiniteScrollContent}
       from '@ionic/react';

<IonInfiniteScroll threshold="100px"
    disabled={disableInfiniteScroll}
    onIonInfinite={(e: CustomEvent<void>) => searchNext(e)}>
    <IonInfiniteScrollContent
        loadingText="Loading more good doggos...">
    </IonInfiniteScrollContent>
</IonInfiniteScroll>