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']();
        }
    }