ionic4——上拉加载下拉更新

【上拉加载】

xxxx.page.html

<ion-content>

 <ion-list>
    <ion-item *ngFor="let item of list">
        <ion-label>{{item}}</ion-label>
    </ion-item>
 </ion-list>

 <ion-infinite-scroll threshold="10%" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content loadingSpinner="crescent" loadingText="Loading more data...">
    </ion-infinite-scroll-content>
 </ion-infinite-scroll>

</ion-content>

xxxx.page.ts

import { Component } from '@angular/core';
@Component({
selector: 'app-tab3',
templateUrl: 'tab3.page.html',
styleUrls: ['tab3.page.scss']
})

export class Tab3Page {
list: any[] = [];
constructor() {
 for (let i = 0; i < 16; i++) {
  this.list.push(`这是第${i}条数据`);
 }
}

loadData(event) {
  setTimeout(() => {
   for (let i = 0; i < 10; i++) {
    this.list.push(`这是第${i}条数据--服务器获取`);
   }
   event.target.complete(); // 告诉ion-infinite-scroll数据已经更新完成 不加这句话的话会卡死
   // 禁用
   if (this.list.length > 40) {
    event.target.disabled = true;
   }
  }, 1000);
 }
}

 

---

【下拉更新】

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

<ion-content>
    <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
        <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="加载中..." refreshingSpinner="circles" refreshingText="Refreshing...">
        </ion-refresher-content>
    </ion-refresher>

        <ion-list>
            <ion-item *ngFor="let item of list">
                <ion-label>{{item}}</ion-label>
            </ion-item>
        </ion-list>
</ion-content>

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

export class Tab1Page {
    public list: any [] = [];
    constructor() {
        for (let i = 0; i < 10; i++) {
        this.list.push(`我是第${i}条数据`);
        }
    }

    doRefresh(event) {
        setTimeout(() => {
            for (let i = 10; i < 15; i++) {
                this.list.unshift(`我是第${i}条数据`);
            }
            event.target.complete(); // 告诉ion-refresher 更新数据
        }, 2000);
    }
}