On Ionic4.x ion-infinite-scroll page load pull more

. 1 , Ion-Infinite-Scroll pull tab loading more ( analog )

 

The official document: 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 ++ ) { 

        the this .list.push (this is the first `$ {i} of data - server obtains`); 
      }; 

      event.target.complete ();    // tell ion -infinite-scroll updated data has been completed 


      // disable Infinite-Scroll-Ion 
      IF ( the this .list.length> 40 ) { 
        event.target.disabled = to 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 {the Component, ViewChild} from '@ Angular / Core' ; 

@Component ({ 
  Selector: 'App-TAB2' , 
  templateUrl: 'tab2.page.html' , 
  styleUrls: [ 'tab2.page.scss' ] 
}) 
Export class Tab2Page { 


  // Get ion-infinite-scroll the object 

 @ViewChild ( 'Infinite' ) myInfinite; 

  List: the any [] = []; 
  constructor () { 

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

        the this .list.push ( `this is the first $ {i} th data ---- `); 
      } 
  } 
  loadMore (Event) { 

    the setTimeout (()=> {   

      For (var I = 0; I <10; I ++ ) { 

        the this .list.push (this is the first `$ {i} of data - acquisition server --- `); 
      }; 

      event.target.complete ();    // tell the ion-infinite-scroll updated data has been completed 

      // disable ion-infinite-scroll 
      IF ( the this .list.length> 100 ) {
         // event.target.disabled = to true; 

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