环境: 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 {}