使用Ionic React实现的无限滚动效果
Posted 一起学前端
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用Ionic React实现的无限滚动效果相关的知识，希望对你有一定的参考价值。
什么是 Ionic React？
Ionic 是一个高级的 html5 移动端应用框架，也是一个开发混合移动应用的前端框架，旨在让 Web 开发者更轻松地构建、测试、部署和监控跨平台应用。Ionic 基于 Angular 语法，之前一直不支持 Vue 和 React 。
开发团队表示，之所以做出这个决定是因为他们对 10000 多名 Ionic 用户进行了调查，结果发现2018 年 React 和 Vue 的使用率排名很高，而且预计 2019 年还将保持上涨趋势。因此，希望提供 React 和 Vue 的支持，让开发者有更多选择。
Ionic React 是今年新出的版本
官网 https://ionicframework.com/docs/react
开始之前
在我们创建一个无限滚动项目之前，我们需要一个 Ionic + React 的应用。
安装过程查看官网文档或者 https://www.npmjs.com/package/@ionic/react 来查看
使用以下命令来创建一个项目
ionic start infiniteScroll tabs --type react
正式开始
Ionic 中用于创建新应用的入门工具包中包括三个标签，三个页面。它们本就是React的功能组件。为了方便起见，我们将分别在每个文件的第一个标签中实现解决的方案.
./src/pages/Tab1.tsx
当我们要实现无限滚动并因此要显示一个列表时，我们要做的第一件事情就是添加一个应包含项目的Stateful Value.
为此，我们使用了 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>
);
};
Fetch API
数据的列表，也就是项目的列表，我们需要一个API来获取到数据并将它显示到我们的项目中，这里我将使用 DOG API 来获取到数据。
这个API是免费而且开源的，不需要任何的key信息，而且支持CORS的请求
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个随机的数据中有10条狗罢了。所以，在使用的过程中，很有可能会有重复的“狗狗”。
加载初始数据
Ionic 提供了我们可以在应用程序中使用的多个生命周期事件，它不仅为标准组件库提供了这类事件，也同样为功能组件提供了类似事件。
要在显示页面的时候获取数据，我们可以链接到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();
}
最后，我们将Ionic的无限滚动组件导入。
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>
完整的代码
为了方便，我将代码放在Github上 https://github.com/peterpeterparker/infiniteScroll/blob/master/src/pages/Tab1.tsx
运行
使用命令 ionic serve 来启动我们的项目。
本文摘自medium ，内容采用意译而非机译。
https://medium.com/better-programming/infinite-scroll-with-ionic-react-dc3e5e63b56e
以上是关于使用Ionic React实现的无限滚动效果的主要内容，如果未能解决你的问题，请参考以下文章