ionic3刷新組件的實戰（xx.complete()要調用在接口裏）

上下拉刷新誤區

 ionic3上拉刷新組件官方文檔提供了一個例子，不折不扣的欺騙用戶刷新成功，若是網絡好兩秒內刷新是沒問題的，但網絡差就呵呵了，就有可能出現無限刷新的可能，由於刷新數據沒有出來，上拉組件消失後仍是停留在最底部繼續出發上拉刷新，上拉組件是根據底部距離進行刷新的。

doInfinite(infiniteScroll) {
    console.log('Begin async operation');

    setTimeout(() => {
      for (let i = 0; i < 30; i++) {
        this.items.push( this.items.length );
      }

      console.log('Async operation has ended');
      infiniteScroll.complete();   // 2秒後關閉下拉刷新
    }, 500);
  }

 頁面內定義屬性去存儲每一個上下拉刷新實例

因爲infiniteScroll是經過參數傳進來的，沒法直接在接口拿到，只能經過this['infiniteScroll'] = infiniteScroll; 去記錄刷新實例，從而能在接口裏調用。切記刷新不要跟定時器沒有任何關係，除非有提醒功能。如下例子注意這兩個方法的調用位置

this.refresherComplete();
this.infiniteScrollComplete();

/**
     * 下拉刷新
     * @param refresher
     */
    doRefresh(refresher: Refresher) {
        this.isInfinite = true;
        // this._index = 0;
        this['refresher'] = refresher;
        this.selectInterface(false);
    }

    /**
     * 上拉刷新
     * @param infiniteScroll
     */
    doInfinite(infiniteScroll: any): void {
        if (!infiniteScroll) { return; }
        this.isRefresh = true;
        this['infiniteScroll'] = infiniteScroll;
        this.selectInterface(true);
    }

    /**
     * 新任務、維修、返貨接口
     * @param portName
     * @param load
     */
    requestData(portName: string, load: boolean = false, screen?: any) {
        let self = this;
        let temArr = this.taskArrTemp[this.segment][this.saveStatu];
        if (load) {
            this._index++;
        } else {
            temArr = [];
            this._index = 0;
        }
        //當前查詢分頁*rows
        let curPageIndex: number = this._index * 4;
        let queryParams = {
            name: portName,
            pageArgs: { first: curPageIndex, rows: 4 },
            params: { taskStatus: this.saveStatu, platform: this.queryStatu }
        };
        //若有篩選條件,則添加參數
        if (screen) {
            queryParams.params['screen'] = screen;
        }
        this.api.noLoading().call(queryParams.name, queryParams.pageArgs, queryParams.params).then(json => {
            this.refresherComplete();
            this.infiniteScrollComplete();
            this.taskContent.taskItemArr = json.result && json.result.content || [];
            for (let item of this.taskContent.taskItemArr) {
                item.orderDate = this.datePipe.transform(new Date(), "yyyy-MM-ddTHH:mm+08:00");
                if (!item.taskType) {
                    item.taskType = 'NEW';
                }
                // 控制好友轉單的好友受理操做
                if (this.saveStatu === 'distributionWaitAccept' && item.toMe) {
                    item._friendAccepte = true;
                }
                // 給已取消全部任務列添加取消字段，控制遮罩層
                if (this.saveStatu === 'cancelled') {
                    item._isCancelTask = 'true';
                }
            }
            //總記錄數
            let totalElements = json.result.totalElements;
            this.taskArrTemp[this.segment][this.saveStatu] = temArr.concat(this.taskContent.taskItemArr);
            if (totalElements === temArr.length) {
                //上拉刷新控制
                this.isInfinite = false;
                this.totalElements = totalElements;
                this.isTotalElements = true;
                if (totalElements !== 0) {
                }
            } else {
                this.isTotalElements = false;
            }
            this.loading = false;
            //上拉
            this.isRefresh = false;

        }).catch(() => {
            this.loading = false;
        });
    }

    /**
     * 全局控制數據是否上拉完成，根據網絡狀況隱藏上拉刷新文字
     */
    infiniteScrollComplete() {
        if (this['infiniteScroll']) {
            this['infiniteScroll']['complete']();
        }
    }
    /**
     * 全局控制數據是否下拉完成，根據網絡狀況隱藏下拉刷新文字
     */
    refresherComplete() {
        if (this['refresher']) {
            this['refresher']['complete']();
        }
    }