9下拉刷新 与 上拉加载

Posted 2020-07-21 淡定君

老样子 贴代码 。

/* ---示例代码----*/
 
<ion-navbar *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>My First List</ion-title>
</ion-navbar>
 
<ion-content>
 
  <ion-refresher (refresh)="doRefresh($event)">
    <ion-refresher-content
            pullingIcon="arrow-dropdown"
            pullingText="Pull to refresh"
            refreshingSpinner="circles"
            refreshingText="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>
 
  <ion-list>
    <ion-item *ngFor="let i of items">{{i}}</ion-item>
  </ion-list>
 
  <ion-infinite-scroll (infinite)="doInfinite($event)">
    <ion-infinite-scroll-content
            loadingSpinner="bubbles"
            loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
 
</ion-content>
 
/* ---示例代码----*/

我把初始化项目的 list.html 改成了这个样子。简单分析一下 其实跟 ionic1 没什么两样 。

值得注意的就是 (infinite)="doInfinite($event)" 和  (refresh)="doRefresh($event)"

不过值得注意的是 他比ionic1好很多 当 item没有值得时候 进这个页面 他默认 会不加载 这就代表着。他不会读取页面的时候 你还要 判断一下一下是否可以让他加载。

之后我把list.js也改掉了。

/* ---示例代码----*/
 
import {Page, NavController, NavParams} from ‘ionic-angular‘;
import {ItemDetailsPage} from ‘../item-details/item-details‘;
 
 
@Page({
  templateUrl: ‘build/pages/list/list.html‘
})
export class ListPage {
 
  items = [];
 
  constructor() {
    for (var i = 0; i < 30; i++) {
      this.items.push( this.items.length );
    }
  }
  doRefresh(refresher) {
    console.log(‘Begin async operation‘, refresher);
 
    setTimeout(() => {
      this.items = [];
      for (var i = 0; i < 30; i++) {
        this.items.push( this.items.length );
      }
      console.log(‘Async operation has ended‘);
      refresher.complete();
    }, 2000);
  }
 
  doInfinite(infiniteScroll) {
    console.log(‘Begin async operation‘);
 
    setTimeout(() => {
      for (var i = 0; i < 30; i++) {
        this.items.push( this.items.length );
      }
 
      console.log(‘Async operation has ended‘);
      infiniteScroll.complete();
    }, 500);
  }
 
}
 
/* ---示例代码----*/

要注意就是红色部分。当异步的数据处理完之后 必须 调用complete 才可以 这点和 ionic1 很像。