下拉刷新 ion-refresher

doc

控件

  
<ion-refresher (ionRefresh)="doRefresh($event)">
  <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="Pull to refresh" refreshingSpinner="circles" refreshingText="Refreshing...">
  </ion-refresher-content>
</ion-refresher>

属性	类型	详情
on-refresh(可选)	表达式	当用户下拉到一定程度然后开始刷新时触发
on-pulling(可选)	表达式	当用户开始下来刷新时触发
pullingIcon(可选)	字符串	当用户下拉时显示的图标。默认: ‘ion-arrow-down-c’
pullingText(可选)	字符串	当用户下拉时显示的文字
refreshingSpinner(可选)	字符串	动画SVG微调显示刷新开始时
refreshingText(可选)	字符串	用户刷新后显示的文字

下拉刷新 执行 doRefresh 加载数据
保存motionList 页面显示

  
 // 下拉刷新
async doRefresh(refresher){
  this.CURRENT_PAGENO = 1 ;
  console.log("doRefresh");

  /* http请求 */
  let timer:any;
  try {
    let result = await this.SNAP_GET_SECURITY_LOG_BY_CONDITION(false);

    if(result){
      clearTimeout(timer);
      refresher.complete();
      // this.ionViewWillEnter();
    }else {
      timer = setTimeout(()=>{
        clearTimeout(timer);
        refresher.complete();
      },4000)
    }


  } catch (e) {
    clearTimeout(timer);
    refresher.complete();
  }
}  



// 获取数据
async SNAP_GET_SECURITY_LOG_BY_CONDITION(isLoadMore){

  Log.e(this.TAG,"SNAP_GET_SECURITY_LOG_BY_CONDITION");
  console.log("SNAP_GET_SECURITY_LOG_BY_CONDITION");

  let result = await this.deviceInfo.doAction({
    name: DeviceActionName.SNAP_GET_SECURITY_LOG_BY_CONDITION,
    params: {
      currentPageNo : this.CURRENT_PAGENO,
      pageSize : this.PAGE_SIZE,
      date : this.selectSecurityDate,
      lastStartTime : '',
      condition: []
    }

  });
  console.log(result);

  if(result.messageCode != "undefined" || result.messageCode != null && result.messageCode == "200"){
    console.log(result.list.length);
    if ( result.list.length > 0 ){
      if (isLoadMore){
        Log.d("SnapActivityPage","isLoadMore push");
        this.motionList = this.motionList.concat(result.list) ;

        Log.d("SnapActivityPage","isLoadMore push" + this.motionList.length + " result.list " +result.list.length );
      }else {
        this.motionList = result.list ;
      }

    }
    return true ;
  }
  return false ;
}

  
<section *ngIf="motionList.length!=0">
    <div *ngFor="let item of motionList">
      <div class="space_none"></div>
      <app-motion [motion]="item"  [page] = "page"></app-motion>
    </div>
    <div class="space_none"></div>
  </section>

自动 拉下刷新

Refresher._beginRefresh()

1 声明控件

@ViewChild(Refresher) refresher: Refresher;

2 自动显示刷新

this.refresher._beginRefresh();