angular+ionic3 | 上拉刷新下拉加载- 推送页面 - ioninfiniteScroll使用笔记

环境: ionic3+angular4+cordova8
页面效果:

message-youhui-detail.html:

<ion-header>

  <ion-navbar>
    <ion-title>message/youhuiDetail</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding class="background">
// 下拉刷新
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
      refreshingSpinner="circles"
      refreshingText="刷新中..."
    ></ion-refresher-content>
  </ion-refresher>
  
 <!-- 
 // 没有数据show
<div *ngIf="topShow" style="
    border: 2px solid;
    text-align: center;
    border-radius: 25px;
    border-color: #f4f4f4;
    background: white;
    width: 125px;
    margin: 0 auto;
    margin-top: 30%;">
    <img src="./assets/img/noDindan.png">
    暂无订单
  </div> -->
// 数据加载
  <div *ngFor="let data of dataList">
    <div class="timeyhq">
      {{data.createTime}}
    </div>
    <div class="bigbox">

      <div class="imgbox">
        <ion-img src="{{data.msgUrl==null?'./assets/test/测试01.jpg':data.msgUrl}}" class="image"></ion-img>
      </div>
      <div class="mes">
        <div class="head">
          {{data.title}}
          <div class="content">{{data.keywards}}</div>
        </div>
      </div>
    </div>
  </div>
// 下拉加载
  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
// 判断加载完成
  <div *ngIf="bottomShow" style="
       border: 2px solid;
       text-align: center;
       border-radius: 25px;
       border-color: #f4f4f4;
       background: white;
       width: 125px;
       margin: 0 auto;">
    全部加载完成
  </div>

</ion-content>

message-youhui-detail.ts

import {ApplicationRef, Component, ViewChild,} from '@angular/core';
import {IonicPage, NavController, NavParams,} from 'ionic-angular';
import {HttpClient} from "@angular/common/http";
import {Auth} from "../../providers/http/auth";

/**
 * Generated class for the MessageYouhuiDetailPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-message-youhui-detail',
  templateUrl: 'message-youhui-detail.html',
})
export class MessageYouhuiDetailPage {
  topShow = false;
  bottomShow = false;
  dataList: any = [];
  viewIndex = 1;
  queryData: any = {
    type: 'youhuiquan',
    // userId: Auth.userData.userLoginId,
    userId: '10030',
    page: '' + this.viewIndex,
    size: '5'
  };
  totalSize: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, public http: HttpClient, public app: ApplicationRef) {
  }

  ionViewDidLoad() {
    console.log('````````ionViewDidLoad MessageYouhuiDetailPage');
  }

  ionViewWillEnter() {
    this.viewIndex = 1;
    this.topShow = false;
    this.bottomShow = false;
    this.dataList = null;
    this.http.post("getLatestMsg", this.queryData).subscribe((data: any) => {
      console.log(data, '**');
      this.dataList = data.list;
      this.totalSize = data.totalIndex;
      console.log(this.totalSize, '总条数');
      /*if (data.length != 0) {
        // alert("data length:" + data.list.length);
        this.dataList = data;
        this.listSize = data.listSize;
      } else {
        this.topShow = true;
        this.dataList = null;
      }*/
      // this.app.tick();
      // this.cdr.detectChanges();
    })
  }


  /**
   * 分页上拉加载
   * @param infiniteScroll
   */
  doInfinite(infiniteScroll) {
    if (this.totalSize <= (this.viewIndex) * this.queryData.size) {
      this.bottomShow = true;
      infiniteScroll.complete();
      return;
    }
    setTimeout(() => {
      this.viewIndex++;
      console.log(this.viewIndex);//2
      this.queryData = {
        type: 'youhuiquan',
        // userId: Auth.userData.userLoginId,
        userId: '10030',
        page: '' + this.viewIndex,
        size: '5'
      };
      this.http.post("getLatestMsg", this.queryData).subscribe((data: any) => {
        if (data.list != null) {
          this.dataList = this.dataList.concat(data.list);
          infiniteScroll.complete();
          console.log('再次加载', this.dataList);
        } else {
          this.bottomShow = true;
          infiniteScroll.complete();
          console.log('加载到底部');
        }
      });
    }, 500);
  }

  //下拉刷新
  doRefresh(refresher) {
    console.log('下拉刷新1');

    setTimeout(() => {
      console.log('下拉刷新2');
      this.ionViewWillEnter();
      refresher.complete();
    }, 2000);
  }

}

message-youhui-detail.scss

page-message-youhui-detail {

  .divyhq {
    text-align: center;
  }
  .imgyhq {
    height: 150px;
    width: 90%;
  }
  .left {
    text-align: left;
  }
  .background {
    background-color: #ececec;
  }

  .timeyhq {
    //border: 2px solid;
    text-align: center;
    border-radius: 25px;
    //border-color: white;
    background: #f3f3f3;
    width: 142px;
    margin: 0 auto;
  }

  .bigbox {
    width: 90%;
    height: 230px;
    background-color: white;
    border-radius: 30px;
    margin: 20px auto;
    .imgbox {
      width: 100%;
      height: 120px;
      .image {
        border-radius: 30px 30px 0 0;
        width: 100%;
        height: 120px;
      }
    }
    .mes {
      padding: 10px;
      .head {
        font-size: 18px;
        color: black;
      }
      .content {
        font-size: 14px;
        color: #666;
      }
    }

  }

}

message-youhui-detail.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { MessageYouhuiDetailPage } from './message-youhui-detail';

@NgModule({
  declarations: [
    MessageYouhuiDetailPage,
  ],
  imports: [
    IonicPageModule.forChild(MessageYouhuiDetailPage),
  ],
})
export class MessageYouhuiDetailPageModule {}