ionic3 分页方法

最新推荐文章于 2021-05-22 11:48:01 发布

玖贤

最新推荐文章于 2021-05-22 11:48:01 发布

阅读量554

点赞数

CC 4.0 BY-SA版权

分类专栏： ionic3 文章标签： ionic3 分页

本文链接：https://blog.youkuaiyun.com/weixin_43801900/article/details/102756080

ionic3 专栏收录该内容

1 篇文章

订阅专栏

在使用Ionic3开发过程中，作者遇到了分页实现的挑战。通过自我探索，作者成功创建了一个分页解决方案，并在此分享其详细方法，期待同行的反馈和建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ionic3 分页方法

开始写分页遇到很多问题。
自己写了一个分页方法感觉还不错分享给大家，不足之处多多指教。

//重点是这里的 sl 监听元素
getCardrecordList(page,sl){
let that = this;
if(this.card.begin_sell_time>this.card.end_sell_time){
this.tools.showToast("发卡的开始日期不能大于截止日期",2000);
return false;
}
this.hasdata =true;
let load = this.loadCtl.create({
content:"",
showBackdrop:false,
dismissOnPageChange:true
});
if(page=='1'){
this.card.curpage==1;
//回到顶部
}
load.present();
this.servers.cardrecordList(this.card,data=>{
load.dismiss();
if(data.code){
if(this.card.curpage==1){
this.ListInfo = data.data;
}else{
that.ListInfo =that.ListInfo.concat(data.data);
}
//无数据图片展示
if(this.ListInfo.length==0){
this.nodataPic = false;
}else{
this.nodataPic = true;
}

//判断分页 以及底部转圈效果
this.hasdata =false;
if(data.nextPage){
if(sl!=""){
sl.complete();
}
this.hasPage = true;
}else{
this.hasPage = false;
}
}
});
}
//下拉方法
doInfinite(infiniteScroll) {
this.card.curpage = this.card.curpage+1;
this.getCardrecordList('',infiniteScroll);
}

//页面内容
<ion-infinite-scroll (ionInfinite)="doInfinite($event)" infinite-scroll-distance="1%" *ngIf="hasPage">
<ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="加载中"></ion-infinite-scroll-content>
</ion-infinite-scroll>