Ionic React无限滚动实现教程

什么是 Ionic React？

Ionic 是一个高级的 HTML5 移动端应用框架，用于开发混合移动应用的前端框架，旨在让 Web 开发者更轻松地构建、测试、部署和监控跨平台应用。Ionic 最初基于 Angular 语法，但现在也支持 React 和 Vue。开发团队在2018年对用户进行调查后，发现 React 和 Vue 的使用率很高，因此决定提供对它们的支持。Ionic React 是新出的版本，允许开发者使用 React 构建 Ionic 应用。

在开始创建无限滚动项目之前，需要先创建一个 Ionic + React 的应用。可以通过官网文档或 npm 包 @ionic/react 查看安装过程。使用以下命令创建项目：

ionic start infiniteScroll tabs --type react

实现无限滚动

Ionic 的入门工具包中包括三个标签页，每个都是 React 功能组件。我们以第一个标签页为例，在 ./src/pages/Tab1.tsx 文件中实现无限滚动功能。

首先，我们需要添加状态来管理项目列表。使用 React 的 useState 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>
  );
};

接下来，我们需要通过 API 获取数据来填充列表。这里使用 DOG API，它是一个免费、开源且支持 CORS 的 API，无需密钥即可获取随机狗狗图片。

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));
}

需要注意的是，这个 API 不包含分页功能，每次请求返回10个随机数据，因此可能会有重复项。

要在页面显示时加载初始数据，可以利用 Ionic 提供的生命周期事件。对于功能组件，可以使用 useIonViewWillEnter Hook，它在组件即将进入视图时触发。

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();
}

然后，导入 Ionic 的无限滚动组件，并在页面中渲染它。

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

// 在 IonContent 中添加以下组件
<IonInfiniteScroll threshold="100px"
    disabled={disableInfiniteScroll}
    onIonInfinite={(e: CustomEvent<void>) => searchNext(e)}>
    <IonInfiniteScrollContent
        loadingText="Loading more good doggos...">
    </IonInfiniteScrollContent>
</IonInfiniteScroll>

运行应用

完成代码后，使用命令 ionic serve 启动项目，即可在浏览器中查看并测试无限滚动功能。