活动列表应用loadMore应用以及刷新逻辑完善
获取列表的方法会有3种状态
- 第一种是onLoad时，首屏的1页5条。
- 第二种是加载更多触发的n页5条。
- 以及第三种，当我们离开页面去往其他页面再回到列表页进行刷新触发的1页n条。
首先先说加载更多的逻辑
- onLoad 里我们进行获取列表的第一种状态
init 是为了防止onLoad和onShow在第一种状态下重复获取列表数据做的限制。 - onReachBottom是小程序当页面滑到最底部时触发的事件，我们通过该事件获取更多的列表数据。
- 首屏数据获取完成后，当我们下拉获取更多时，触发了onReachBottom ，此时的flag为false；
flag是为了防止onReachBottom和onShow在第三种状态下重复获取列表数据做的限制。 - getActivityData方法中有两个参数 initList 和 nowPageSize ，initList默认状态下为false，当其为true是，是在onLoad首次调用该方法时使用的。其余状态下page会随着调用次数不断加1，数据也会跟着页码的获取使用concat方法不断累加进原列表中。nowPageSize会在第三种状态下使用。
然后是列表的刷新逻辑
- 当我们离开页面时会触发onHide，我们在onHide中讲当前的页码赋值给我们的beforePage
(该方法只适用于不关闭当前页面进行跳转的页面，如果使用redirectTo等关闭当前页面跳转的方式，这里还是需要使用store进行储存页码的) - 当我们返回页面时，此时只会触发onShow，我们使用了flag阻止了意外情况发生导致重复获取列表数据。这时调用getActivityData，我们传入了true和未跳转前数据列表中的数据数量。如果跳转前我们以及有10条数据在列表中，这时的搜索条件则为page=1，pageSize=10，此时我们的列表数以及进行了刷新。然后我们将原来的下一次搜索的页码beforePage重新赋值给现在的页码数page。这样当我们下一次进行获取更多的操作（第二章状态）时，我们的搜索条件仍为上一次的页码。
举个例子：
- 现在我还没有跳转，此时我下一次搜索的页码（page）为3，列表中有10条数据。这个时候我要离开页面进入详情页中，我记录了当前下一次搜索的页码page（beforePage=3）
- 然后我重新回到列表页，这时进行了一次onShow中的搜索，搜索条件为（page=1，pageSize=10),然后我将现在的page赋值为3，这样我再进行加载更多操作时，仍是接着之前的page进行搜索的，不会造成数据的重复和丢失
下方为实现的部分代码：如果我的代码和逻辑有不合适的地方欢迎讨论~
data：init: true, flag: false,
onLoad() {
if (this.init) {
// 第一次进入页面时（onLoad）时触发获取第一页的5条活动
this.getActivityData(true).then(() => {
this.init = false
}
},
onShow() {
// 阻止onLoad触发该逻辑
if (!this.init) {
// 防止底部的加载更多再次获取列表数据
this.flag = true
this.getActivityData(true, this.activityData.length).then(() => {
this.flag = false
})
}
},
onHide() {
// 页面离开记录当前的页码
this.beforePage = this.page
},
onReachBottom() {
// 当onShow的状态进行时，阻止加载更多再一次获取列表数据
!this.flag && this.getActivityData()
},
...
// 获取活动列表
getActivityData(initList = false, nowPageSize) {
// initList为true时（onLoad和点击日历），获取该条件下的1页5条
// nowPageSize有传值时，值为当前活动列表的活动数，获取该条件下的1页 nowPageSize 条，然后再将跳转前的page页码赋值给现在的page页码
if (initList) {
this.page = 1
}
let params = {
pageNo: this.page,
pageSize: nowPageSize || this.pageSize,
}
this.loadStatus = 'loading'
initList &&
uni.showLoading({
title: this.$t('location.loading'),
mask: true
})
return this.$api.activity.getActivityList(params).then(res => {
if (res.status === 200) {
uni.hideLoading()
let total = res.data.total
initList
? (this.activityData = res.data.data)
: (this.activityData = this.activityData.concat(res.data.data))
this.page = this.page + 1
// 如果本次有传nowPageSize，将page还原为跳转前的页码，下一次再获取更多接着之前的页码和页数进行获取
if (nowPageSize) {
this.page = this.beforePage
}
if (this.activityData.length < total) {
this.loadStatus = 'more'
} else {
this.loadStatus = 'noMore'
}
} else {
uni.showToast({
icon: 'none',
title: res.message
})
}
})
},