【ionic4】上拉加载功能

使用ionic封装组件来实现页面的上拉加载功能,带有假分页思想的上拉加载，可根据实际情况修改。

一、 .html代码：

       <!-- 上拉加载 -->
        <ion-infinite-scroll threshold="20px" (ionInfinite)="loadincome(infiniteScroll)" *ngIf="Isloadincome">
            <ion-infinite-scroll-content loadingSpinner="crescent" loadingText="正在加载更多数据...">
            </ion-infinite-scroll-content>
        </ion-infinite-scroll>
         <!-- 页面滑动加载完毕后提示 -->
        <div [hidden]="!IsILastPage" >
          <ion-row>
              <ion-col text-center>
                没有更多内容
              </ion-col>
          </ion-row>
        </div>

threshold="" 距离底端距离
(ionInfinite)=“loadincome(infiniteScroll)” 默认上拉动作触发事件

二、 page.ts文件

import { Component, OnInit,ViewChild } from '@angular/core';
import sd from 'silly-datetime'
import { CommonService } from './../../services/common.service';
import { IonInfiniteScroll } from '@ionic/angular';


@Component({
  selector: 'app-bill-record',
  templateUrl: './bill-record.page.html',
  styleUrls: ['./bill-record.page.scss'],
})
export class BillRecordPage implements OnInit {
  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
  public tab = 'tabAll';
  public person ={
    cardId:'E000001',
  }
  //每页加载数据集合
  public incomelist:any[]=[];
  //源数据集合
  public incomedata:any[]=[];
  //有无数据显示
  incomeshow:boolean;
  //上拉加载相关定义
  public incomepage ={
    pageSize:10,
    currentpage:1,
    maxsize:0, 
  }
  //加载内容显示或隐藏
  Isloadincome:boolean;
  //加载内容完毕提示
  IsILastPage:boolean;

  ngOnInit() {
    this.rechargerecord();
  }
  //查询所有收入记录
  rechargerecord(){
    ...//获取数据（this.incomelist）
    ...//如果存在数据则显示
    ...//默认加载前几条数据       
      })
  }

  loadincome(infiniteScroll){ 
    setTimeout(() =>{
      infiniteScroll.complete();
      //如果当前页是最后一页
      if(this.incomepage.currentpage == this.incomepage.maxsize){
        infiniteScroll.disabled=true;//上拉加载禁用
        this.IsILastPage=true;//显示没有更多内容
      }else{
        this.incomepage.currentpage +=1;
        //选择要显示的数据
        var end = this.incomepage.currentpage * this.incomepage.pageSize;
        this.incomelist = this.incomedata.slice(0,end);
      }
    },500)   
  }
}