「这是我参与2022首次更文挑战的第23天，活动详情查看：2022首次更文挑战」
前言
大家好，上一篇分享中实现了优秀作者榜的数据加载及列表展示，大部分功能都已经实现了，但是还有一些零散的问题需要优化一下，截止目前虽然列表数据已经加载出来了，但如果仔细观察会发现当向下滚动进行翻页时加载的都是重复的数据，都是第一页的数据，今天的分享就专门来问题修复一下这些问题：
- 列表翻页数据重复加载修复
- 切换标签刷新数据列表
列表翻页数据重复加载修复
前面的分享中虽然实现了优秀作者榜列表展示，但是当滚动进行翻页时加载的却都是一样的数据，也就是说不管是翻到多少页加载的数据都是第一页的数据一直在重复加载。后来又仔细研究了一下官方的接口发现：
按照我们传统的翻页操作，每翻一页，页码都会加1传给后台，而我们本次调用recommend请求作者数据时也是按照这种操作实现的（即页码加1），然而官方接口却不是通过页码加1进行翻页，而是每次页码加到20才能翻页
找到了问题的根源所在，问题也就好解决了，把原来的页码自动加1改为每次加20就可以修复这个问题了，代码如下：
let pageNo = 0;
const onLoad = function (cate_id) {
// 省略未修改部分代码
pageNo += 20; //每次页码加20
});
};
复制代码切换标签刷新数据列表
前面遗留的第二个问题，由于所有标签都是共用同一个数据列表，所以当点击标签切换是，数据列表并没有刷新也没有重新加载，所以就导致所有标签加载的数据都是一样的，这显然也不合理，解决方案也很简单：
官方在调用recommend接口时还会传递一个cate_id参数这个参数的值就是每个标签对应的category_id值，我们只要在切换标签时把对应标签的category_id传过去即可。van-tabs组件为我们提供了一个click-tab的事件，在点击每个标签时都会触发这个事件，我们只需要在这个事件中清空authorList并重新加载数据即可实现切换标签属性数据列表。
但是在实现时遇到了另外一个问题，就是由于每个van-tab都是由v-for指令动态生成的，并且click-tab事件是绑定在van-tab的父组件van-tabs上的，而这个时候还没有加载category_id也就是数没办法在click-tab事件中获取到category_id。经过一番研究和探索发现click-tab事件触发时会把对应的van-tab的title和name属性传过来，那么我们就可以把这两个中的其中一个值绑定为category_id就可以了，而title是要在页面上展示的，name则是用来作为标签的名称不会显示在页面上，所以把name属性设置为具体的标签category_id就可以完美解决了，改造后的代码如下：
<van-tabs color="#1e80ff" v-model:active="active" @click-tab="clickTab"><!--添加click-tab事件-->
<van-tab
v-for="item in categoryList"
:key="item.category_id"
:title="item.category_name"
:name="item.category_id" <!--name值设置为category_id-->
>
<!--省略代码-->
</van-tab>
</van-tabs>
复制代码 const clickTab = function (params) {
state.authorList = [];
onRefresh(params.name);
};
复制代码总结
今天的分享没有实现新功能，而是将前面分享中遗留的两个问题：列表翻页数据重复加载和切换标签列表不刷新问题。明天我们将继续来完善一下作者列表中的新功能：关注和取消关注以及点击返回按钮后返回到首页关注列表。今天的分享就到这里了!