这个是基于上一篇文章,上拉加载更多,继续的下拉刷新
这里面利用到了 vant组件库里的 PullRefresh
下拉刷新时会触发 refresh
事件,在事件的回调函数中可以进行同步或异步操作,操作完成后将 v-model
设置为 false
,表示加载完成
代码:
data () {
return {
List: [], // 频道列表
HomeList: [], // 用户选择的频道列表
channelId: 0, // 选择频道的id
loading: false, // 上拉每一页的加载状态
done: false, // 是否加载完毕
timestamp: undefined, // 记录上一次时间戳,需要给后台,做分页用的
isLoading: false// 下拉刷新的加载状态
}
},
// 使用侦听器实现数据的切换
watch: {
async channelId () {
this.HomeList = []
this.timestamp = undefined
下拉刷新BUG 频繁切换频道造成的bug
/*
在切换频道的时候,
需要手动把done设置为false,
表示当前频道没有加载完毕,
重新开始
*/
this.done = false
this.getArticleList()
}
},
async created () {
const res = await getAllChannels()
this.List = res.data.data.channels
this.getArticleList()
},
methods: {
// 获取文章列表
下拉 设置个参数 isPullDown = false
async getArticleList (isPullDown = false) {
// isPullDown = false 下拉刷新
const resp = await getArticleListApi({
channelId: this.channelId,
timestamp: this.timestamp
})
console.log(resp.data.data)
const { pre_timestamp: preTimestamp, results } = resp.data.data
if (preTimestamp === null || results.length < 10) {
this.done = true
return
}
this.timestamp = preTimestamp
// 下拉 如果isPullDown = false 就代表上拉加载
if (isPullDown === false) {
this.HomeList = [...this.HomeList, ...results]
this.loading = false
} else { // 否则就是下拉刷新
// 把最新的数据直接替换HomeList
this.HomeList = results
// 关闭下拉加载状态,可以再次进行下拉刷新
this.isLoading = false
}
},
// 上拉加载更多
onLoad () {
if (this.HomeList.length > 0) {
// 发请求,拿数据,合并
this.getArticleList()
}
},
// 下拉刷新
onRefresh () {
this.getArticleList(true)
setTimeout(() => {
this.isLoading = false
}, 2000)
}
}
}