https://www.bilibili.com/video/BV1zq4y1p7ga?p=218
List 組件通過 loading 和 finished 兩個變量控制加載狀態，當組件滾動到底部時，會觸發 load 事件並將 loading 設置成 true。此時可以發起異步操作並更新數據，數據更新完畢后，將 loading 設置成 false 即可。若數據已全部加載完畢，則直接將 finished 設置成 true 即可。
<template>
<div class="home-container">
<!-- 頭部區域 -->
<van-nav-bar title="黑馬頭條" fixed />
<!-- 導入，注冊，並使用 ArticleInfo 組件 -->
<!-- 在使用組件的時候，如果某個屬性名是“小駝峰”形式，則綁定屬性的時候，建議改寫成“連字符”格式。例如： -->
<!-- cmtCount 建議寫成 cmt-count -->
<van-pull-refresh v-model="isLoading" :disabled="finished" @refresh="onRefresh">
<van-list v-model="loading" :finished="finished" finished-text="沒有更多了" @load="onLoad">
<ArticleInfo
v-for="item in artlist"
:key="item.id"
:title="item.title"
:author="item.aut_name"
:cmt-count="item.comm_count"
:time="item.pubdate"
:cover="item.cover"
></ArticleInfo>
</van-list>
</van-pull-refresh>
</div>
</template>
<script>
// 按需導入 API 接口
import { getArticleListAPI } from '@/api/articleAPI.js'
// 導入需要的組件
import ArticleInfo from '@/components/Article/ArticleInfo.vue'
export default {
name: 'Home',
data() {
return {
// 頁碼值
page: 1,
// 每頁顯示多少條數據
limit: 10,
// 文章的數組
artlist: [],
// 是否正在加載下一頁數據，如果 loading 為 true，則不會反復觸發 load 事件
// 每當下一頁數據請求回來之后，千萬要記得，把 loading 從 true 改為 false
loading: true,
// 所有數據是否加載完畢了，如果沒有更多數據了，一定要把 finished 改成 true
finished: false,
// 是否正在下拉刷新
isLoading: false
}
},
created() {
this.initArticleList()
},
methods: {
// 封裝獲取文章列表數據的方法
async initArticleList(isRefresh) {
// 發起 GET 請求，獲取文章的列表數據
const { data: res } = await getArticleListAPI(this.page, this.limit)
if (isRefresh) {
// 證明是下拉刷新；新數據在前，舊數據在后
// this.artlist = [新數據在后, 舊數據在前]
this.artlist = [...res, ...this.artlist]
this.isLoading = false
} else {
// 證明是上拉加載更多；舊數據在前，新數據在后
// this.artlist = [舊數據在前, 新數據在后]
this.artlist = [...this.artlist, ...res]
this.loading = false
}
if (res.length === 0) {
// 證明沒有下一頁數據了，直接把 finished 改為 true，表示數據加載完了！
this.finished = true
}
},
// 只要 onLoad 被調用，就應該請求下一頁數據
onLoad() {
console.log('觸發了 load 事件！')
// 1. 讓頁碼值 +1
this.page++
// 2. 重新請求接口獲取數據
this.initArticleList()
},
// 下拉刷新的處理函數
onRefresh() {
console.log('觸發了下拉刷新！')
// 1. 讓頁碼值 +1
this.page++
// 2. 重新請求接口獲取數據
this.initArticleList(true)
}
},
// 注冊組件
components: {
ArticleInfo
}
}
</script>
<style lang="less" scoped>
.home-container {
padding: 46px 0 50px 0;
}
</style>