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.
138 lines
4.4 KiB
138 lines
4.4 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: '',
|
|
// 自定义onShow
|
|
customOnShow: false,
|
|
}
|
|
}
|
|
},
|
|
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.mixinListConfig.customOnShow) {
|
|
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()
|
|
}
|
|
}
|