[Ionic+Angular] 무한 스크롤 구현

ion-vertual-scroll과 ion-infinite-scroll을 사용해 일정한 양의 데이터만큼만 보여주고 스크롤 할 경우 데이터를 추가로 로드하여 보여주는 스크롤을 쉽게 구현할 수 있다.

1. terminal에서 빈(blank) 템플릿의 프로젝트를 생성한다.

ionic angular의 경우 --type=angular --capacitor 옵션을 붙이는 것이 좋다. (capacitor는 웹 네이티브 앱을 빌드하기 위한 네이티브 런타임)

ionic start scroll-example blank --type=angular --capacitor

2. 스크롤이 포함될 페이지의 html에 ion-virtual-scroll, ion-infinite-scroll을 사용해 작성한다.

• 나의 경우 card 형태의 리스트에 무한 스크롤을 적용하기 위한 코드이다. ion-virtual-scroll의 items 프로퍼티는 연결된 타입스크립트에서 가져올 데이터 배열을 속성값으로 작성해주면 된다. {{ }}를 통해 배열 내 데이터 각각 값을 사용 가능하다.
• ion-infinite-scroll-content의 loadingSpinner, loadingText로 로딩 시 나올 스피너와 텍스트를 입력한다.

<ion-content [fullscreen]="true">
  // ion-header ...

  <ion-virtual-scroll [items]="items">
    <ion-card *virtualItem="let item">
      <ion-card-header>
        <ion-card-title>{{ item.name }}</ion-card-title>
       </ion-card-header>
       <ion-card-content>
         {{ item.content }}
       </ion-card-content>
     </ion-card>
  </ion-virtual-scroll>

  <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

3. html에 연결된 타입스크립트 코드에 데이터 가져오는 함수와 이 데이터를 스크롤 목록에 로딩하는 함수를 작성한다.

import { Component, ViewChild } from '@angular/core';
import { IonVirtualScroll } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  items: any[] = [];
  index = 0;

  @ViewChild(IonVirtualScroll) virtualScroll: IonVirtualScroll;

  constructor() {
    this.getCardData();
  }

  getCardData() {
    for (let i = 0; i < 10; i++) {
      this.items.push({
        name: this.index,
        content: 'index: ' + this.index
      });
      this.index++;
    }
  }

  loadData(event) {
    // Using settimeout to simulate api call 
    setTimeout(() => {

      // load more data
      this.getCardData();

      //Hide Infinite List Loader on Complete
      event.target.complete();

      //Rerender Virtual Scroll List After Adding New Data
      this.virtualScroll.checkEnd();

      // App logic to determine if all data is loaded
      // and disable the infinite scroll
      if (this.items.length == 100) {
        event.target.disabled = true;
      }
    }, 500);
  }
}