ionic@3.20.0下拉刷新和上滑加载更多。。。

2019-04-01  本文已影响0人  海边的愚人

以下仅作为我个人的工作记录及对未来工作的提醒。
页面同时有下拉刷新和上滑加载更多,在ionic3里面相应的组件及方法:

// 下拉刷新
doRefresh(refresher) {
   setTimeout(() => {
     this.loadList();
     refresher.complete();
   }, 2000);
 }
loadList(){
   let loading = super.showLoading(this.loadingCtrl, '加载中...');
   this.uservice.getListApi({page: this.reqParams.page,limit:   
   this.reqParams.limit}).subscribe(data=>{
   loading.dismiss();
     if(data.rows.length > 0){ 
       this.list = this.list.concat(data.rows) // 此处为重点,这里不能如普通列表直接用this.list = data.rows,
       this.reqParams.page = this.reqParams.page + 1;
     }else if(data.rows.length === 0){
       this.hasMore = false;
     }
   },err=>{
     loading.dismiss();
     this.errMsg = <any>err;
     super.showToast(this.toastCtrl, this.errMsg);
   })
 }

this.list = this.list.concat(data.rows)// 此处为重点,这里不能如普通列表直接用this.list = data.rows,因为当用户下拉刷新的时候再请求列表将会请求第二页(因第一次loadList()已经将请求的页码增加到第二页),如果用普通列表那样直接等于请求回来的列表在下拉刷新时覆盖掉第一页。

// 翻页
  doInfinite(infiniteScroll){
    if (this.hasMore == false) {
      infiniteScroll.complete();
      return;
    }
    this.uservice.getListApi({page: this.reqParams.page,limit: this.reqParams.limit}).subscribe(data=>{
      if(data.rows.length > 0){
        this.list = this.list.concat(data.rows);
        this.reqParams.page = this.reqParams.page + 1;
      }else {
        this.hasMore = false;
      }
      infiniteScroll.complete();
    })
  }

不管上滑还是下拉,加载的永远是最新的一页。

希望下次来看这篇文,能够知道自己要描述什么吧。。。给自己多一点笑脸嘿嘿

上一篇 下一篇

猜你喜欢

热点阅读