ionic 上拉加载更多

doc
参考

控件

1
2
3
4
<!--上拉更多 ng-if="moreDataCanBeLoaded()"-->
<ion-infinite-scroll (ionInfinite)="doInfinite($event)" distance="1%" >
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
  
//上拉 加载更多
async doInfinite(infiniteScroll) {
if (this.isLock) return ;
this.isLock = true;

console.log('Begin async operation');
this.CURRENT_PAGENO = this.CURRENT_PAGENO + 1 ;


/* http请求 */
let timer:any;
try {

let result = await this.SNAP_GET_SECURITY_LOG_BY_CONDITION(true);

if(result){
clearTimeout(timer);
infiniteScroll.complete();
// this.ionViewWillEnter();
}else {
timer = setTimeout(()=>{
clearTimeout(timer);
infiniteScroll.complete();
},4000)
}
this.isLock = false;

} catch (e) {
clearTimeout(timer);
infiniteScroll.complete();
this.isLock = false;
}

}

islock:锁,防止在网络慢的时候多次请求。