首先页面上添加滚动条:
<ion-infinite-scroll (ionInfinite)="doInfinite($event)" threshold="100px">
<ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="正在加载更多..."></ion-infinite-scroll-content>
</ion-infinite-scroll>
页面刷新:
<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content
pullingIcon="arrow-dropdown"
pullingText="下拉刷新"
refreshingSpinner="circles"
refreshingText="加载中...">
</ion-refresher-content>
</ion-refresher>
对于页面分页加载:
requestData(InfiniteScroll){
var that=this;
var url='网址'+this.id+'&pageSize='+this.pagesize+'&pageNum='+this.page;
this.http.get(url).subscribe(res => {
var response = res.json();
if (response.length > 0) {
that.data = that.mcoins.concat(response);
this.datalength=this.mcoins.length;
}
else{
// 对于内容是否加载完毕模块的隐藏属性设置
this.isend = true;
}
// 当页面多余1页时滑到顶部的按钮显示
if (that.page > 1) {
this.totop = true; }
that.page++;
if (InfiniteScroll) {
InfiniteScroll.complete();
if (response < 20) {
InfiniteScroll.enable(false);
}
}
},
error => {
console.log(error);
})
}
// 滚动条触发事件
doInfinite(infiniteScroll){
this.requestData(infiniteScroll);
}
// 滚动条是否显示
scrollToBottom() {
if (this.content.scrollToBottom) {
this.content.scrollToBottom();
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)