이온+반응 무한 스크롤

Ionic React는 올해 초에 출시되었습니다 available. 저는 이번 주 목요일에 저희 로컬meetup에서 그 기능들을 소개할 것입니다.그중 하나는 무한 스크롤 바의 실현입니다. 저는 아래 댓글로 여러분과 공유하겠습니다.😃

저희가 시작하기 전에.

이 해결 방안을 실현하기 위해서 우리는 이온+반응 응용 프로그램이 필요하다.아직 없거나 이 강좌를 따르기 위한 예시를 만들려면 문서가 완비되고 따르기 쉬운 공식 버전 documentation 을 보거나 다음 명령을 사용하여 하나를 시작하십시오.

ionic start infiniteScroll tabs --type react

입문

Ionic에서 새 응용 프로그램을 만드는 데 사용되는 초보자 도구 패키지는 세 개의 옵션 카드, 세 개의 페이지를 포함하고 있으며, 그 자체가 React 기능 구성 요소입니다.편의를 위해 우리는 첫 번째 옵션 카드에서 각각 파일./src/pages/Tab1.tsx에서 우리의 해결 방안을 실현할 것이다.
무한 스크롤을 하고 목록을 표시하려면 첫 번째 일은 상태 값을 추가하는 것입니다. 이 값은 우리의 항목을 포함해야 합니다.이를 위해 React 갈고리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가 되었다.이 API는 무료이며 원본을 시작합니다. 영패가 필요하지 않으며 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));
}

이 예는 실제 해결 방안에 포함된 것처럼 페이지를 포함하지 않습니다.그것은 무작위로 개 10마리를 뽑았다.물론, 이 때문에, 우리의 목록에는 중복된 항목이 있을 수 있다.

초기 데이터 로드

Ionic은 애플리케이션에서 사용할 수 있는 여러 라이프 사이클 이벤트를 제공합니다.또한 매우 마음에 드는 점은 표준 구성 요소에 이런 이벤트를 제공할 뿐만 아니라 기능 구성 요소에도 이런 이벤트를 제공한다.페이지를 표시할 때 데이터를 얻기 위해서, 라우팅된 구성 요소가 보기에 애니메이션으로 표시될 때 명령을 터치할 수 있습니다.

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>

모두

나는 상술한 단계에서 코드를 분할하여 더욱 쉽게 접근할 수 있도록 하였지만, 전체적으로 말하자면, 당신은 그것을 찾을 수 있습니다 GitHub🐩

테스트

만약 모든 것이 계획대로 진행된다면, 명령행 ionViewWillEnter 으로 우리의 프로그램을 실행하면, 당신이 가장 좋아하는 브라우저로 무한한doggos 목록을 조회할 수 있을 것이다🎉

이렇게 많아

여과

필터링된 항목 목록을 표시하는 것은 무한 스크롤 막대처럼 흔할 수 있습니다.따라서 새로운 상태로 구현에 필터를 추가하고 ionic serve 함수를 수정하여 항목을 초기화하고 필터를 응용한 상황에서 지정한 품종만 조회합니다.

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

React 갈고리를 사용하여 데이터 가져오기 및 새로 고침

필터에 적용될 변경 사항을 살펴보고 데이터를 새로 고치기 위해 이전에 사용했던 fetch 라이프 사이클을 useIonViewWillEnter React 갈고리로 대체합니다.이렇게 하면 우리가 페이지에 들어갈 때, 데이터는 여전히 불러올 뿐만 아니라, 상태가 업데이트될 때도 추출될 것이다.

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>

모두

나는 위로 GitHub 전송된 프레젠테이션 해결 방안의 두 번째 옵션 카드에서 이 필터의 예시를 실현했다🐕

테스트

이 프로그램을 다시 실행하면 현재 닥스 사냥개 필터 목록만 사용할 수 있습니다🥳

이렇게 소시지가 많아요.

케이크 위의 체리🍒🎂

무한권축은 Ionic+React의 멋진 기능 중 하나일 뿐이며, 내가 우리의 Meetup을 위해 실현한 원형에서 사용한 기능 중의 하나이기도 하다.그 밖에 제가 구축한 작은 응용 프로그램은 무료이고 오픈된 것입니다. 해보세요, 해보세요Wooof🐶
무한과 초월로 나아가다🚀
데이비드
P, 저의 이전 강연에서 상술한 주제를 제시해 주셔서 감사합니다👍