上拉加载、下拉更新
1.上拉加载
引用官网给出的代码
<ion-content>
<ion-list> <ion-item *ngFor="let item of list"> {{item}} </ion-item> </ion-list> <!-- 这是官网给的代码,必须放在列表下方 -->
<ion-infinite-scroll (ionInfinite)="doInfinite($event)" threshold="100px"> <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="加载中..."> </ion-infinite-scroll-content> </ion-infinite-scroll> </ion-content>
ts:
public list = []; public sum = 0; constructor() { this.setdata(); } setdata() { for (let i = 0; i < 10; i++) { //模拟获取数据 this.sum += 1; this.list.push(`第${this.sum}条数据`) } } doInfinite(event) { setTimeout(() => { this.setdata(); event.complete();//提交更新 console.log(1); if(this.sum>=50){ event.enable(false);//终止上拉 } }, 2000); }
2.下拉更新
同样,用官网的代码
<ion-content> <!-- 这个要放在列表前面 --> <ion-refresher (ionRefresh)="doRefresh($event)"> <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="下拉更新" refreshingSpinner="circles" refreshingText="正在更新"> </ion-refresher-content> </ion-refresher> <ion-list> <ion-item *ngFor="let item of list;let key=index" [navPush]="NewsinfoPage" [navParams]="params"> {{item}} </ion-item> </ion-list> </ion-content>
然后写doRefresh方法
public list = []; sum = 0; constructor() { this.setdata(); } setdata() { let temp=[]; for (let i = 0; i < 10; i++) { temp.push(`第${i}条数据,第${this.sum}次更新`); } this.list=temp; } doRefresh(event) { setTimeout(() => { this.sum+=1;//模拟更新 this.setdata(); event.complete(); }, 2000); }