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

下拉刷新和滾動加載在移動端是很常見的需求，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() 註冊爲服務。

---

如有錯誤或表達不許確處歡迎指正。