You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
136 lines
3.6 KiB
136 lines
3.6 KiB
// 简化版列表的混入
|
|
export default {
|
|
data() {
|
|
return {
|
|
list: [],
|
|
pageNo : 1,
|
|
pageSize : 8,
|
|
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) {
|
|
// console.log('本次请求的pageNo和pageSize', this.pageNo, this.pageSize)
|
|
|
|
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()
|
|
}
|
|
}
|