分享一段简单的滚动分页辅助类pager
import { IonInfiniteScroll } from '@ionic/angular';
import utils from '@shared/utils';
export class Pager {
data: Array<any>;
param: {
size: number;
current: number;
};
total: number;
ionScroll: IonInfiniteScroll;
/**
* 分页辅助类构造函数
* @param ionScroll ionic滚动组件实例
* @param param 分页参数
*/
constructor(ionScroll: IonInfiniteScroll, param?: {
size: number;
current: number;
}) {
this.data = [];
this.param = param || { size: 20, current: 1 };
this.ionScroll = ionScroll;
this.ionScroll.disabled = false;
}
/**
* 构建滚动分页逻辑
* @param data 分页数据
* @param total 总数
*/
build(data: Array<any>, total: number) {
this.total = total;
this.data.push(...data);
const len = this.total, page = this.param.current, limit = this.param.size;
const start = utils.mul(utils.sub(page, 1), limit);
const end = len < utils.add(start, limit) ? len : utils.add(start, limit);
this.param.current++;
if (end < len) {
this.ionScroll.complete();
}
else {
this.ionScroll.disabled = true;
}
return this.data;
}
}
pager类的调用示例
component.html
<ion-item class="mg-t8" *ngFor="let item of pager?.data" routerLink="/contract/detail" [queryParams]="{id:item.id}">
<div>内容</div>
</ion-item>
<ion-infinite-scroll #ionScroll (ionInfinite)="pagedGrid.load()" threshold="100px">
<ion-infinite-scroll-content>
</ion-infinite-scroll-content>
</ion-infinite-scroll>
component.ts
// 滚动分页列表
@ViewChild(IonInfiniteScroll) ionScroll: IonInfiniteScroll;
pager: Pager;
pagedGrid = {
init: () => {
this.pager = new Pager(this.ionScroll);
this.pagedGrid.load();
},
load: () => {
const pager = this.pager;
const searchParam = utils.isEmpty(this.filter.key) ? {} : {
key: this.filter.key
};
const cons = this.dataApi.getConStates();
this.servApi.list(pager.param, searchParam).subscribe(res => {
if (res.status == 0) {
res.data.records.forEach(item => {
const con = cons.find(m => m.value == item.conState);
item.conStateName = con?.text;
item.conStateColor = con?.color;
});
pager.build(res.data.records, res.data.total);
}
});
}
};