Ionic4.x ion-infinite-scroll 上拉分頁加載更多

1、ion-infinite-scroll 上拉分頁加載更多(模 擬)

 

官方文檔:https://ionicframework.com/docs/api/infinite-scroll

 

<ion-content> <ion-list>
<ion-item *ngFor="let item of data"> {{item}}
</ion-item> </ion-list>
<ion-infinite-scroll #myInfiniteScroll threshold="100px" (ionInfinite)="loadData($event)"> <ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data..."> </ion-infinite-scroll-content>
</ion-infinite-scroll> </ion-content>

 

import { Component } from '@angular/core';
import { IonInfiniteScroll } from '@ionic/angular';
@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

  list:any[]=[];
  constructor(){

      for(var i=0;i<16;i++){

        this.list.push(`這是第${i}條數據`);
      }
  }
  loadData(event){

    setTimeout(()=>{  

      for(var i=0;i<10;i++){

        this.list.push(`這是第${i}條數據--服務器獲取`);
      };

      event.target.complete();   //告訴ion-infinite-scroll數據已經更新完成 


      //禁用ion-infinite-scroll
      if(this.list.length>40){
        event.target.disabled=true;
      }

    },1000);

  }
}

---

<ion-header>
  <ion-toolbar>
    <ion-title>
      Tab Two
    </ion-title>

    <ion-buttons slot="end">
      <ion-button (click)="doStop()">
          中止
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>


  <ion-list>      
    <ion-item *ngFor="let item of list">
      <ion-label>{{item}}</ion-label>
    </ion-item>
  </ion-list>
  <ion-infinite-scroll #infinite threshold="25%" (ionInfinite)="loadMore($event)">
    <ion-infinite-scroll-content loadingSpinner="crescent" loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

import { Component ,ViewChild} from '@angular/core';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page {


  //獲取 ion-infinite-scroll 這個對象

 @ViewChild('infinite') myInfinite;

  list:any[]=[];
  constructor(){

      for(var i=0;i<16;i++){

        this.list.push(`這是第${i}條數據----`);
      }
  }
  loadMore(event){

    setTimeout(()=>{  

      for(var i=0;i<10;i++){

        this.list.push(`這是第${i}條數據--服務器獲取---`);
      };

      event.target.complete();   //告訴ion-infinite-scroll數據已經更新完成 

      //禁用ion-infinite-scroll
      if(this.list.length>100){
        // event.target.disabled=true;

        this.myInfinite.disabled=true;
      }
    },1000);
  }
  doStop(){
    this.myInfinite.disabled=true;
  }
}