多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
## 一 ListPage 介绍 ### data | 字段 | 类型 | 说明 | | :---: | :---: | --- | | list | Array | 数据列表 | | page | number | 当前页码 | | limit | number | 每页显示数量 | | total_pages | number | 总页数量 | | is_get_list | Boolean | 是否正在请求数据 | | close_mounted | Boolean | 是否关闭在初始化页面时获取数据 ,默认初始化页面时获取数据| ### computed | 字段 | 类型 | 说明 | | :---: | :---: | --- | | no_data | Boolean | 没有列表数据 | | list_more_status | String | 加载更多显示状态 nomore 没有更多、loadmore加载更多、loading加载中 | | no_more | Boolean | 最后一页,没有更多 | ### methods - HandleRes({items,total_pages}) 获取数据后,需要通过 `HandleRes` 处理数据,对list进行赋值,不能直接通过 `this.list={list}` 进行赋值。该方便会自动处理分页数据显示。 | 字段 | 类型 | 说明 | | :---: | :---: | --- | | items | Array | 列表数据 | | total_pages | Number | 总页数 | - RefreshList 刷新列表数据,重新获取 `page=1` 的数据 ### 触底加载更多 页面引用了 `ListPage` 默认触底调用加载更多方法,最后一页不触发。 ### 下拉刷新 页面引用了 `ListPage` 默认下拉调用刷新数据方法,前提是要开启下拉刷新。 ## 二 调用 ### GetList 页面引用了 `ListPage` 必须定义 `GetList` 方法,因为 `ListPage` 中“初始化”和“获取更多”的都会调用到这个方法。 ``` async GetList() { let res = await this.$Request('Order.GetOrder', { page: this.page, status: this.tab - 1, }).catch(err => {}) if (res && res.status) { this.HandleRes({ items: res.data.order_list.data, total_pages: res.data.order_list.last_page }) } } ```