import { BaseLifeCycle } from 'lifeCycle'; export interface LoadMoreOption extends BaseLifeCycle{ perPage?:number remote? beforeUpdate? } // == 设置列表分页 export const setPagination = (data:Array, perPage?:number) => { perPage = perPage || 10; return { // 分页个数 perPage: perPage, // 返回所有列表数据 all: () => { return data; }, // 返回列表数量 count: () => { return data.length; }, // 返回分页数据 getPage: (startNum, endNum) => { return data.slice(perPage * startNum, perPage * endNum); }, getByIndex: (index) => { return data[index]; }, remove: (list) => { data.splice(data.indexOf(list), 1); return data; }, removeByIndex: (index) => { data.splice(index, 1); return data; }, add: (list) => { data = data.concat(list); return data; } } } /** * 加载数据+下拉加载(新) * @param data 待加载的来源数据,可以是封装过的,也可以是未封装过的 * @param option 相关配置 */ export const createLoader = (data, option:LoadMoreOption = {}) => { if(!data || !data.getPage) data = setPagination(data, option.perPage); const getRemoteData = option.remote; // 远程数据接口 const created = option.created; // 初始化回调 const beforeUpdate = option.beforeUpdate;// 更新前回调 const updated = option.updated; // 更新回调 const destroyed = option.destroyed; // 销毁回调 let pageData = data.getPage(0,1); let current = pageData.length / data.perPage; let max = data.count() / data.perPage; let timer; let canBeLoaded = max > current; // loader触发器 const trigger = () => { if(beforeUpdate) beforeUpdate(); if(current == max){ if(getRemoteData){ getRemoteData(data).then((res) => { data.add(res); // 将新数据添加到data中 max = data.count() / data.perPage; // 重新计算max if(max > current){ update(); }else{ finishUpdate(); } }); }else{ finishUpdate(); } }else{ // 设定加载间隔为360ms timer = setTimeout(() => { update(); }, 360); } // 更新数据和当前页面标识 function update() { pageData = data.getPage(0, current + 1); current = pageData.length / data.perPage; updated(pageData); return current; } function finishUpdate() { clearTimeout(timer); destroyed(); } }; // == 调用初始化方法时,输出当前分页数据、加载触发、是否可加载判断 created(pageData, trigger, canBeLoaded); }