<template>
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<van-cell v-for="item in list" :key="item.id" :title="item.title" />
</van-list>
</template>
<script>
import { getArticles } from '../../../api/article'
export default {
name: 'ArticleList',
data() {
return {
//存储到列表数据的数组
list: [],
//控制加载中loading状态
loading: false,
//控制数据加载结束的状态
finished: false,
//请求获取下一页数据的时间戳
timestamp: null
};
},
mounted() {
},
props: {
channel: {
type: Object,
require: true
}
},
methods: {
// 初始化或滚动到底部的时候会触发调用onload()
async onLoad() {
try {
// 1.请求获取数据
const { data } = await getArticles({
channel_id: this.channel.id,
timestamp: this.timestamp || Date.now()
})
console.log(data)
// 2.把请求结果放到list数组
const { results } = data.data
this.list.push(...results)
// 3.将本次数据加载结束后把加载状态设置为结束
this.loading = false
// 4.判断数据是否全部加载完成
if (results.length) {
// 更新获取下一页数据的时间戳
this.timestamp = data.data.pre_timestamp
} else {
// 没有数据了,将finished设置为true,不再load加载更多
this.finished = true
}
} catch (err) {
console.log('请求失败!')
}
}
}
}
</script>
<style lang="less" scoped>
</style>