基于ionic滚动分页组件IonInfiniteScroll的辅助类Pager

分享一段简单的滚动分页辅助类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);
			}
		});
	}
};