1. 程式人生 > >ionic學習(十一):頁面下拉重新整理(Refresher)

ionic學習(十一):頁面下拉重新整理(Refresher)

官網參考:

https://ionicframework.com/docs/api/components/refresher/Refresher/

 

用法說明:

在html頁面需要下拉重新整理的位置新增如下程式碼:

 <!-- 下拉重新整理 -->
    <ion-refresher (ionRefresh)="doRefresh($event)">
            <ion-refresher-content
                pullingIcon="arrow-dropdown"
                pullingText="下拉重新整理"
                refreshingSpinner="circles"
                refreshingText="載入中...">
            </ion-refresher-content>
    </ion-refresher>

在ts頁面設定函式doRefresh() 

//下拉重新整理函式
  doRefresh(refresher) {
    console.log('Begin async operation', refresher);
    setTimeout(() => {
      console.log('資料重新整理!');
          //重新整理時需要呼叫的函式寫這裡
     refresher.complete();
    }, 2000);
  }

 

                                    ------end-----