ionic4 入门 (五) 上拉加载 下拉刷新

ionic4 (入门) 上拉加载 下拉刷新

继续 ionic 开发首页 上拉加载 下拉刷新

html 部分代码

• 下拉刷新部分 , 需要需要注意在一个content 里面使用

<ion-header>
  <ion-toolbar>
    <ion-title>home</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content >   
<!-- 写在这里 其他 任何位置没有区别 , 如果要分段添加 需要重新添加 content -->
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
<ion-list> 
<ion-slides pager="true" [options]="slideOpts">
  <ion-slide *ngFor="let item of bannerList">  
    <img [src]="item.banner_url">
  </ion-slide>
</ion-slides>

    <ion-item *ngFor="let item of product_list" style="--min-height : 100px" (click)="toProductDetail(item.product_id)">
      <ion-thumbnail slot="start" style="height: 80px; width: 80px;">
        <img [src]="item.product_main_url" >
      </ion-thumbnail>
    <ion-label>{{item.product_title}}
      <br>
      <label style="color:red">¥{{item.price}}</label>
      <s style="color: #999999; margin-left: 10px">{{item.strik_price}}</s>
    </ion-label>
  </ion-item>
</ion-list>
<ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

• 绑定点击事件 下拉刷新事件 doRefresh()

doRefresh(event) {
  /** 重置 当前的index*/
    this.index = 1;
    this.getGoodList(event);
}

/** 获取商品列表的方法 */
getGoodList(event?) {
    if (this.index === 0) {
      this.index = 1;
    }
    const params = {
      page_index: this.index,
      page_size: 5
    };
    this.httpres.get_request('Product/getProductList?', params).subscribe(data => {
      console.log(data);

      // 获取到数据 关闭下拉刷新
      if (event) {
        event.target.complete();
      }
      /* 判断网络请求失败 */
      if (data['isError'] === false) {
        /** 判断 是否为最开始加载数据/ 下拉刷新 */
        if (this.index === 1) {
          /* 直接将数组 里面的值*/
          this.product_list = data['data'];
          /* 只要有数据 就可以加载
            也可以做加载完毕的判断 , 不好意思 我在这里挖坑了
            如果是tp 框架 会返回是否还有更多 直接取就好了
          */
          this.index ++ ;
          return;
        }

        /** 加载更多 */
        if (data['data'].length > 0) {
          /* 循环遍历 将数据添加到 数组的末尾 */
          data['data'].forEach(element => {
            this.product_list.push(element);
          });
          this.index ++ ;
          /* 这里判断 下来加载的数据 , 是否小于 你传入page_size ,
           如果是小于, 说明不会有更多返回了,
           禁止下拉加载
           */
          if (data['data'].length < 5) {
            event.target.disabled = true;
          }
        } else { 
          /* 
          同上 如果 没有数据返回 说明没有更多数据了, 禁止上拉加载
          */
          this.httpres.presentToast('没有更多的数据了');
          event.target.disabled = true;
        }
      }

    },
    errMsg => {
      console.log(errMsg);
      if (event) {
        event.target.complete();
      }
    }
    );
  }

上拉加载 ion-infinite-scroll

• html 部分, 将下面的代码插入到 html 最下面就好了

<ion-infinite-scroll threshold="100px" (ionInfinite)="getGoodList($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="来呀 小妞...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

• ts 部分已经插入进去了

文档部分 :
上拉加载 ion-infinite-scroll
下拉加载 ion-refresher

下一章节 商品详情