[Ionic4] Scroll Event를 활용한 데이터 추가 로딩 방법

Scroll을 맨 아래까지 이동했을 경우 자동으로 데이터가 로딩되도록 하는 방법입니다.

Ionic4에서 ion-infinite-scroll 태그를 제공하지만 원하는대로 동작하지 않는 경우가 있어서 직접 구현했습니다.

 

1. Scroll Event를 받아 처리하는 코드를 작성합니다.

private scrollDepthTriggered = false;

async scrollingToBottom($event: any) {
    if (this.scrollDepthTriggered) {
        return;
    }

    if ($event.target.localName != "ion-content") {
        return;
    }

    const scrollElement = await $event.target.getScrollElement();
    const scrollHeight = scrollElement.scrollHeight - scrollElement.clientHeight;
    const currentScrollDepth = $event.detail.scrollTop;
    const targetPercent = 90;

    let triggerDepth = ((scrollHeight / 100) * targetPercent);

    if (currentScrollDepth > triggerDepth && !this.loadingDone) {
        this.scrollDepthTriggered = true;
        await this.moreLoadingData(); //추가 로딩하는 함수 호출
        this.scrollDepthTriggered = false;
    }
}

 

 

2. html 영역에 Scroll Event 시 호출할 함수를 정의합니다.

<ion-content [scrollEvents] = "true" (ionScroll) = "scrollingToBottom($event)" >
    ...
</ion-content>