分页数据请求
可以用于 jquery vue react 等各类项目中,可简化较多重复代码,使分页数据请求更便于管理和使用。
如何安装
npm i list-data
基础使用
以 vue 开发实践举例,只需将各属性方法绑定即可。
template: ` <div class="some-list"> <div class="list-box"> <block v-for="(item, index) in someList.data" :key="index"> <div class="item>{{ index }}</div> </block> </div> <div class="list-status"> <span v-if="someList.status === 'LOADING'">加载中</span> <span v-if="someList.status === 'NODATA'">没有数据</span> <span v-if="someList.status === 'EMPTY'">没有更多数据了</span> </div> </div> ` { const ListManager = ; const list: someList = ListManager; return ListManager someList ; } { this; } methods: { const ListManager = this; ListManagerajax = thissomeAjax; ListManager; } { this$axios; } { // 触底加载 或 换页加载 // 且当数据加载中或无数据或全加载完时自动不会继续请求 thisListManager; } { // 下拉刷新 或 更换tab时 thisListManager; } { // 表格类的应用,跳页功能 ListManagerlistpage = page; thisListManager; } ;
react 与 vue 不同在于数据更新需使用 setState,所以只需在 initSomeList 再继续加上绑定即可。
ListManager this;
扩展使用
// ListData 构造器 list: data: size: 10 page: 1 status: 'WAIT' // WAIT LOADING NODATA EMPTY // 用于:1. 统一修改 size 初始值;2. 统一添加更多联动项比如 total {} // 用于:1. 统一 size 改 pageSize;2. 统一添加 loading {} // 每个实例应该都要改此方法,且需注意 bind(this) 哟 {} // 用于:1. 统一 res.result 结构;2. 统一取消加载图;3. 统一报错弹窗 {} // 用于个性化结果调整,比如返回 total {} // 用于个性化列表数据调整,比如每项加上已选择 {} // 本次过程全部完成 {} // --- 三个常调用的方法 {} {} {}
可进行类似以下操作的拓展:
ListDataprototype { configsize = 15; listtotal = 0;};ListManager { Toast; const page size = params; return pageNo: page pageSize: size type: '1' ;};ListManager { Toast; if resstatus !== Toast; return true; // 返回 true 则不继续运行 };ListManager { const data = resresultlist || ; thistotal = resresulttotal; // 获取数据后用在别处 resresult = data; // 注意:列表数据会从 res.result 中取}ListManager { data;}
其中,你也可以利用 ListData.prototype 做二次封装,
这样就不用每次 new ListData 时都修改实例方法了。
使用 TypeScript
;