// 简化版列表的混入 export default { data() { return { list: [], pageNo : 1, pageSize : 10, mixinListApi: '', isLoading: false, hasMore: true, // 额外返回出去的数据 extraData: null, // 每次更新数据后执行的函数 可以进行数据处理 afterUpdateDataFn: function() {}, // 每次更新数据前执行的函数, beforeUpdateDataFn: function() {}, // 混入配置 mixinListConfig: { // 数据返回的直接路径 responsePath: 'result.records', // 列表是否需要下拉刷新 isPullDownRefresh: true, // 列表是否需要上拉加载 isReachBottomLoad: true, // 额外返回出去的数据的路径 extraDataPath: '' } } }, computed: { // 自定义onShow前会执行的函数 mixinFnBeforePageShow() { return function() {} } }, methods: { // 获取文件的自定义传参 -- 可以在页面中重写 mixinSetParams() { return {} }, // 解析分路径获取嵌套值 resolvePath(obj, path) { if (path){ return path.split('.').reduce((acc, key) => (acc && acc[key] !== undefined ? acc[key] : null), obj) }else { return obj } }, // 初始化分页 initPage(){ this.pageNo = 1, this.hasMore = true }, // 获取列表 async getList(isRefresh = false) { if (!this.hasMore) { return } this.isLoading = true const apiMethod = this.resolvePath(this.$api, this.mixinListApi) if (typeof apiMethod !== 'function') { console.log('mixinApi不存在', this.mixinListApi); return } // 每次更新数据前执行的函数 if (this.beforeUpdateDataFn) { this.beforeUpdateDataFn(this.list) } const res = await apiMethod({ pageNo: this.pageNo, pageSize: this.pageSize, ...this.mixinSetParams() }) const resData = this.resolvePath(res, this.mixinListConfig.responsePath) || [] if (res.code === 200) { // 如果没有值了 if (!resData.length) { this.hasMore = false uni.showToast({ title: '暂无更多数据', icon: 'none' }) }else { this.pageNo++ } if (isRefresh ) { // 如果是刷新,直接覆盖 this.list = resData } else { this.list = [...this.list, ...resData] } // 如果有额外数据的路径,刷新后,需要将额外数据也刷新 if (this.mixinListConfig.extraDataPath !== '') { this.extraData = this.resolvePath(res, this.mixinListConfig.extraDataPath) } } // 每次更新数据后执行的函数 if (this.afterUpdateDataFn) { this.afterUpdateDataFn(this.list) } // 如果有在加载中 if (this.isLoading) { this.isLoading = false } // 有过有在下拉加载 uni.stopPullDownRefresh() }, }, async onShow() { // if (!this.list.length) { if (this.mixinFnBeforePageShow) this.mixinFnBeforePageShow() this.initPage() await this.getList(true) // } }, async onPullDownRefresh() { // 在下拉还没结束前 不做任何操作 if (this.isLoading) { return } this.initPage() await this.getList(true) }, async onReachBottom() { if (this.isLoading) { return } await this.getList() } }