ionic 아래로 스크롤시 새로 고침 ion-refresher example 예제

인스타그램을 보면 앱을 아래로 당길시 새로고침이 되는 기능이 있다.

ionic에서 ion-refresher라는 기능을 제공함으로 HTML과 TS 처리만 해주면 사용할 수 있다.

예제는 아래와 같다.

 

HTML

<ion-content>
  <ion-refresher slot="fixed" (ionRefresh)="ReloadData($event)" pullMin="100" pullMax="200">
    <ion-refresher-content
    pullingIcon="arrow-down-outline" 
    pullingText="Pull to refresh" 
    refreshingSpinner="crescent"
    refreshingText="Refreshing...">    
    </ion-refresher-content>

 

TS

  ReloadData(event){
    setTimeout(()=>{
//      console.log(this.scrollPageNum);
      this.scrollPageNum=1;  //페이지 초기화
      this.review_list = []; // 데이터 초기화
      this.loadPickData(true);  //데이터 가져옴
      event.target.complete();
    },700);
  }

결과화면