类似于淘宝,浏览商品时,每次下拉都会刷新出新的数据(需要配合分页使用,分页在我博客中有介绍:https://mp.csdn.net/postedit/83584133)
html页面
<ion-header>
<ion-navbar color="light">
<ion-title>item-detailds</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<!--数据列表-->
<ion-list no-lines>
<ion-card *ngFor="let item of items">
<h2>
<ion-icon name="ios-keypad"></ion-icon>
<span> {{item.ItemID}} </span>
</h2>
<p>
<span>{{item.ItemType}}</span>
<span>{{item.Qty}}</span>
</p>
<p>
<span>{{item.Name}}</span>
</p>
</ion-card>
</ion-list>
<!--下拉时,加载新的数据-->
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content loadingSpinner="crescent" loadingText="loadingmore">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
<!--加载完全部数据后-->
<p *ngIf="BolNoMoreData" text-center>Not More Data...</p>
</ion-content>
ts页面
每次刷新累加10条数据(注意:总数据未必会被10整除,下面的 else if 循环就是对该问题的处理)
//总数据
ItemList:any=[];
//页面默认显示的数据(该数据为总数据的Top 10)
ShowItemList:[];
//刷新的次数,页面需要默认显示10条数据,故为1
PageIndex=1;
//每次刷新加载的数据数
LoadNum=10;
//没有更多数据时显示
BolNoMoreData:boolean=false;
//无限滚动取数据
doInfinite(infiniteScroll) {
//当前显示的数据量
var ShowDataNum = this.PageIndex * this.LoadNum
//下拉刷新后加载的数据量
var EndShowDataNum = (this.PageIndex + 1) * this.LoadNum
if (EndShowDataNum<this.ItemList.length){
for(var i = ShowDataNum; i < this.EndShowDataNum; i++){
this.ShowItemList.push(this.ItemList[i]);
}
}else if( (endShowDataNum-this.ItemList.length)>0 ){
for(var i = ShowDataNum; i < this.ItemList.length; i++){
this.ShowItemList.push(this.ItemList[i]);
}
}else{
this.BolNoMoreData=true;
}
this.PageIndex++;
infiniteScroll.complete();
}
本来是从数据库取的数据,但为了更整洁明了的显示 ion-infinite-scroll 的作用,特地去掉了请求服务的代码!,本文根据之前从数据库取值的代码改编完成的,纯手写,未经验证,可能会存在一些错误!