下拉刷新和滾動加載在移動端是很常見的需求，Ionic 為我們提供了開箱即用的組件。在這裏我結合自己做的小demo簡單介紹下。

Template

在模板中需要將 ion-refresher 組件放置在 ion-content 內部的首位，將 ion-infinite-scroll 置於尾部。

<ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
        pullingIcon="arrow-dropdown"
        pullingText=
 
"下拉刷新"
        refreshingSpinner="circles"
        refreshingText="刷新中...">
    ></ion-refresher-content>
</ion-refresher>

<!-- 這裏放置需要顯示的數據 -->

<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content
 

        loadingSpinner="bubbles"
        loadingText="加載更多...">
    </ion-infinite-scroll-content>
</ion-infinite-scroll>

Refresher 下拉刷新

下拉刷新事件在用戶下拉一定程度時被觸發，進而啟動刷新過程。一旦異步操作完成並且刷新結束，需要調用complete()。

doRefresh(refresher){
    setTimeout(() => {
        this.getData() //獲取數據
 

        refresher.complete()
    }, 1000)
}

InfiniteScroll 滾動懶加載

無限滾動事件是當用戶向上滾動頁面時執行的操作，當用戶滾動到指定的距離觸發事件。異步操作完成需要調用complete()。
雖然名字叫無限滾動，但在實際需求中我們經常用它來完成數據的懶加載功能。

doInfinite(infiniteScroll){
    setTimeout(() => {
        this.getData()
        infiniteScroll.complete()
    }, 1000)
}

示例

1. 效果展示

基於一個簡單的增刪改查小 demo 效果如圖。

2. Template

3. Model

在PC端一般將數據分頁處理以達到提升性能的目的，而移動端的操作特性不允許使用分頁組件(既醜又不方便 : )
但它們原理是相同的，因此不必改變接口相關方法只改變前端實現即可。當前的 PageInfo 是需要展示數據類的分頁包裝類。

4. Service

調用接口方法註冊為服務，使用時依賴註入即可。

5. Typescript

調用分頁接口服務傳參獲取數據，每加載一次就將部分數據 push 到結果集中，view 隨之更新。

由於使用場景較多，這裏也可以將 doRefresh()/doInfinite() 註冊為服務。

若有錯誤或表達不準確處歡迎指正。

Ionic -- Refresher & InfiniteScroll 下拉刷新與滾動懶加載