什么是 Ionic React?
官网 https://ionicframework.com/docs/react
ionic start infiniteScroll tabs --type react
./src/pages/Tab1.tsx
useState
React Hook 。此外,我们正在使用卡片来渲染它们,并为它们添加了另外一个状态,当没有其他需要迭代的状态时,这将会实现停止滚动条的功能。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));
}
ionViewWillEnter
组件Router即将要动画化到视图中时触发的数据。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>
本文摘自medium ,内容采用意译而非机译。 https://medium.com/better-programming/infinite-scroll-with-ionic-react-dc3e5e63b56e