ionic4中上拉加载更多

    订餐系统中加载订餐信息、以及加载账单信息，我们用到了上拉加载更多的功能，让数据成量的出现，这样做的好处就是，可以减轻服务器的压力，不需要加载全部的数据。

 ion-infinite-scroll  组件实现上拉分页加载更多

 <ion-list>
    <ion-item *ngFor="let item of list">
      <ion-label>{{item.operate}}</ion-label>
    </ion-item>        
  </ion-list>
  <ion-infinite-scroll threshold="10%" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content loadingSpinner="crescent" loadingText="正在加载中...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
  <p *ngIf="!hasMore">---我是有底线的---</p>

 scroll.page.ts文件

import { Component, OnInit } from '@angular/core';
import { CommonService } from '../../services/common.service';

@Component({
  selector: 'app-scroll',
  templateUrl: './scroll.page.html',
  styleUrls: ['./scroll.page.scss'],
})
export class ScrollPage implements OnInit {
  public list:any[]=[];
  public page:any=1;//厨师加载第一页
  public hasMore=true;
  constructor(
    public common:CommonService)
    {} 

  ngOnInit(): void {
      this.loadData(null);//页面初始化的时候加载数据
  }
 
  loadData(e){
    var api = "CardAddLog/QueryRechargeByTime?cardId=E000510&datetime=2019-04"
      this.common.ajaxGet(api).then((response:any)=>{
        console.log(response)
        // this.list=response;
        //this.list.concat(response.result)：将原来的数据与返回来的数据进行拼接用到了concat
        this.list=this.list.concat(response);
          ++this.page;
          //判断下一页有没有数据
          if(response.length<20){
            e?e.target.disabled=true:'';
            this.hasMore=false;
          }          
          e?e.target.complete():''; //请求完成数据以后告诉ion-infinite-scroll组件更新数据
      })
  }
}