「这是我参与2022首次更文挑战的第19天，活动详情查看：2022首次更文挑战」
前言
大家好，在上一篇分享中我们已经实现来首页推荐列表中的热榜板块。接下来继续实现首页推荐列表的主体部分 - 也就是推荐文章列表。其实有了前面热榜板块的分享，对于本次的文章列表来说也就简单了，因为二者用的都是同一个接口，只是需要传递的参数不同，展示的UI样式也不同，因此本次的分享中大部分时间还是会耗在样式的调试上面。为了尽量减少在样式上的时间耗费，我们还是投个机取个巧，直接把官方的样式拷贝过来直接用了。今天要实现的功能：
- 文章列表展示
- 下拉刷新
- 滚动翻页，自动加载数据
文章列表展示
文章列表内容分为两种类型：官方广告软文和博主发布的正式文章，两者在表面上看没有什么太大的区别，但用到的样式却不太一样，为了方便起见，我们还是把官方的HTML元素和css样式拷贝过来直接使用。
文章列表依然使用前面热榜中已经封装好的后端接口：recommend_all_feed，但需要动态的传入3个参数：cursor：表示当前加载第几页数据，limit：每次请求多少条数据，sort_type：表示排序类型，比如当sort_type为2时按热度排序，也就是前面的热榜，当sort_type为200时则按推荐进行排序
本次分享主要会涉及3个核心知识点，就是前面提到的：文章列表展示，下拉刷新和滚动翻页自动加载数据。但实现起来比较简单，因为vant组件库已经为我们封装好来对应的组件。比如下拉刷新组件：van-pull-refresh和列表展示及滚动翻页组件：van-list。我们只需要按照官方文档说明进行配置使用即可。大概实现思路如下：
- 在vant组件库中拽一个van-pull-refresh组件并配置v-model值：refreshing和refresh事件onRefresh
- 在van-pull-refresh组件中再添加另一个van-list组件，并分别配置相关属性v-model:loading="loading"、:finished="finished"、finished-text="没有更多了"和@load="onLoad"
- 在van-list中再添加一个个van-cell子项，并用v-for指令循环该组件（van-cell）
- 在van-cell中分为两部分内容：官方广告和正式文章，由于二者渲染时对应的数据结构不同，因此需要借助v-if和v-else指令进行区分
- 在setup函数中分别定义响应式属性refreshing 默认值false，loading 默认值false、finished 默认值false和recommendList 默认值为[]
- 在setup中定义两个函数onLoad和onRefresh，分别用于加载数据和刷新列表
- 在onLoad中请求后端api：recommend_all_feed，并传递cursor、limit和sort_type三个参数
- 接口请求成功后判断如果是刷新状态，则清空数据列表recommendList，并把refreshing置为false
- 将每次请求回来的数据push到recommendList中，并将loading置为false表示加载完成，同时让pageNo（cursor）累加，表示下一次将请求下一页数据
- 当pageNo大于50时将finished置为true，表示已经将全部数据请求并加载完成
- 在onRefresh中将finished置为false，同时将pageNo置为0表示从第一页重新加载数据，将loading置为true表示正在加载中，然后再调用onLoad请求数据。
核心代码及最终效果如下：（由于代码过长，关于广告和文章部分元素和样式请到官网拷贝，这里就不贴出了）
<div class="tab-list-content article-list">
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list
v-model:loading="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<van-cell
v-for="item in recommendList"
:key="item.item_info.article_id || item.item_info.advert_id"，
>
<div class="article-list">
<div v-if="item.item_type === 14"> <!--自行到官网拷贝源码 广告内容--></div>
<div v-else><!--自行到官网拷贝源码 正式文章--></div>
</div>
</van-cell>
</van-list>
</van-full-refresh>
</div>
let pageNo = 0;
const onLoad = function () {
api.recommendAllFeed(pageNo, 20, 200).then((res) => {
if(state.refreshing){
state.recommendList = [];
state.refreshing = false;
}
state.recommendList.push(...res.data);
state.loading = false;
if(pageNo >= 50){//只加载50页（1000条）数据
state.finished = true;
}
pageNo++;
});
};
const onRefresh = function (params) {
pageNo = 0;//从第一页重新加载
state.finished = false;//清空列表数据，重新加载
state.loading = true;
onLoad();
};
总结
本次分享我们实现了推荐列表中的文章及广告展示，以及下拉刷新，滚动翻页自动加载数据功能，核心功能点在于下拉刷新和滚动翻页，好在vant已经为我们封装好了相关组件可以直接使用，也为我们节省了不少时间。好了本次分享就到这里了，喜欢的朋友欢迎点赞加关注哦
