IONIC 页面下拉加载新的数据（ion-infinite-scroll的使用）

         类似于淘宝，浏览商品时，每次下拉都会刷新出新的数据（需要配合分页使用，分页在我博客中有介绍：https://mp.csdn.net/postedit/83584133）

html页面 

<ion-header>
  <ion-navbar color="light">  
    <ion-title>item-detailds</ion-title>  
 </ion-navbar>
</ion-header>

<ion-content>
  <!--数据列表-->
  <ion-list no-lines>
    <ion-card *ngFor="let item of items">    
        <h2>
          <ion-icon name="ios-keypad"></ion-icon>
          <span> {{item.ItemID}} </span>
        </h2>
        <p>
          <span>{{item.ItemType}}</span>
          <span>{{item.Qty}}</span>
        </p>
        <p>     
          <span>{{item.Name}}</span>
        </p>
    </ion-card>
  </ion-list>

  <!--下拉时，加载新的数据-->
  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content loadingSpinner="crescent" loadingText="loadingmore">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

  <!--加载完全部数据后-->
  <p *ngIf="BolNoMoreData" text-center>Not More Data...</p>
</ion-content>

ts页面

   每次刷新累加10条数据（注意：总数据未必会被10整除，下面的 else if 循环就是对该问题的处理）

//总数据
ItemList:any=[];
//页面默认显示的数据（该数据为总数据的Top 10）
ShowItemList:[];

//刷新的次数，页面需要默认显示10条数据，故为1
PageIndex=1;
//每次刷新加载的数据数
LoadNum=10;

//没有更多数据时显示
BolNoMoreData:boolean=false;

//无限滚动取数据
  doInfinite(infiniteScroll) {
     //当前显示的数据量
     var ShowDataNum = this.PageIndex * this.LoadNum
     //下拉刷新后加载的数据量
     var EndShowDataNum = (this.PageIndex + 1) * this.LoadNum

     if (EndShowDataNum<this.ItemList.length){
        for（var i = ShowDataNum; i < this.EndShowDataNum; i++）{
            this.ShowItemList.push(this.ItemList[i]);
        }      
     }else if( (endShowDataNum-this.ItemList.length)>0 ){
        for（var i = ShowDataNum; i < this.ItemList.length; i++）{
           this.ShowItemList.push(this.ItemList[i]);
        }    
     }else{
        this.BolNoMoreData=true;
     }
     
     this.PageIndex++;
     infiniteScroll.complete();
  }

    本来是从数据库取的数据，但为了更整洁明了的显示 ion-infinite-scroll 的作用，特地去掉了请求服务的代码！,本文根据之前从数据库取值的代码改编完成的，纯手写，未经验证，可能会存在一些错误！