イオン+無限反応で無限スクロール

イオン反応available 今年初めに、私は我々の地域でその特徴のいくつかを紹介しますmeetup 今週の木曜日.これらのうちの1つは無限のscrollerの実装です.そして、それは私が以下のポストであなたと分担しようとしています😃

始める前に

我々はイオン+反応アプリケーションを必要とするソリューションを実装する.あなたがまだ1つを持っていないか、またはちょうどあなたがこのチュートリアルに従うサンプル1を作成したいならば、よく文書化されて、公式documentation それとも、次のコマンドで1を起動します.

ionic start infiniteScroll tabs --type react

始める

新しいアプリケーションを作成するためにイオンによって使用されるスターターキットは3つのタブ、3つのページが含まれています.便利な理由で、ファイル内の最初のタブでソリューションを実装します./src/pages/Tab1.tsx .
我々は無限のスクロールを実装し、したがってリストを表示しようとしているので、最初に我々がしようとしているのは、我々のアイテムを含んでいなければならないstatent値を追加することです.そのためにuseState フックの反応.また、私たちは、カードを使用してレンダリングされ、我々は何も繰り返されるために残っているときにスクロールを停止するのに役立つ別の状態を追加している.

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 , チュートリアル目的のための私の好みのAPIになっていた、そのような情報を取得する.この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));
}

この例では、実際の解決策として、任意のページ付けが含まれていないことに注意してください.それはちょうど10ランダム犬を取得します.もちろん、我々のリストで重複しているかもしれません.

初期データ読み込み

イオンは、我々のアプリで使用できる複数のライフサイクルイベントを提供します.私が本当に感謝していることは、彼らが標準的なコンポーネントのためにだけでなく、機能的なコンポーネントのためにそのようなイベントを提供しないという事実です.私たちのページが表示されるときにデータを取得するには、我々はionViewWillEnter これは、コンポーネントルーティングが表示にアニメーション化しようとするときに起動されます.

import {useIonViewWillEnter} from '@ionic/react';

const Tab1: React.FC = () => {

useIonViewWillEnter(async () => {
    await fetchData();
  });

};

無限スクロール

チェイスに切りましょう、我々は現在我々の無限のスクロールを加えるつもりです.まず最初に、新しいデータを取得し、操作が完了したことをscrollerに伝えるのを助ける新しい関数を追加します.

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>

全部で

私は、上記の手順でコードを分割して実装をよりアクセス可能にしますGitHub 🐩

テスト

すべての計画に従って行った場合は、コマンドラインでアプリケーションを実行するとionic serve , あなたのお気に入りのブラウザでdoggosの無限のリストを参照することができます🎉

それほど多くのdoggos

フィルタリング

項目のフィルタリングされたリストを表示するのは、おそらく無限のスクロールとして一般的です.したがって、新しい状態の形でフィルタを追加し、実装に変更しますfetch アイテムをリセットし、フィルタが適用される場合、指定した品種だけを照会する機能.

const [filter, setFilter] = useState<string | undefined>(undefined);
async function fetchData(reset?: boolean) {
  const dogs: string[] = reset ? [] : items;
  const url: string = filter ?
        `https://dog.ceo/api/breed/${filter}/images/random/10` : 
        '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([...dogs, ...res.message]);

          setDisableInfiniteScroll(res.message.length < 10);
        } else {
          setDisableInfiniteScroll(true);
        }
      })
      .catch(err => console.error(err));
}

レスポンスフックでデータを取得してリフレッシュする

フィルタに適用され、データをリフレッシュするための変更を観測するために、我々は現在、useIonViewWillEnter 前に使ったライフサイクルuseEffect フックの反応.そうすることによって、我々が我々のページに入るとき、データはまだロードされそうです、また、また、州更新に関してフェッチされることになっています.

import React, {useState, useEffect} from 'react';

const Tab1: React.FC = () => {

  useEffect( () => {
      fetchData(true);
  }, [filter]);

};

我々は、イオンボタンやラベルをインポートします.

import {IonButton, IonLabel} from '@ionic/react';

そして最後にこれらのコンポーネントを使用してリストのフィルタリングをトリガーします
ダックスフント.

<IonButton onClick={() => setFilter('dachshund')}>
    <IonLabel>Filter</IonLabel>
</IonButton>

全部で

私はアップロードしたデモソリューションの2番目のタブでこのフィルタの例を実装しましたGitHub 🐕

テスト

再度アプリケーションを実行する場合は、ダックスフントだけでリストをフィルタリングすることができます🥳

ダックスフント

ケーキのチェリー🍒🎂

無限のスクロールは、イオン+の素晴らしい機能の一つであり、唯一の私は私のmeetupのために実装しているプロトタイプで使用しているそれらの1つです.さらに、私が構築した小さなアプリケーションは無料でオープンソースであり、試してみるWooof 🐶
無限に🚀
ダビデ
P . S .:私の前で上記の主題を私に提案したために👍