vant tab使用循环动态加载，tab中内容也是个公共列表组件，在切换tab页签时列表组件内容的加载串在一起了，应该如何解决

Question

vue移动端项目，代码如下：

<van-tabs v-model="active" :swipeable="true" @change="tabChange" \>  
<van-tab v-for="tab in tabList" :title="tab.name" :name="tab.uuid" :key="tab.uuid"\>  
 <list-news :listType="active"\></list-news>  
</van-tab>  
</van-tabs>

tab标签是动态加载的，里面的list-news是想用一个公共列表组件，但是问题出现在切换页签后上拉加载更多列表内容时，获取数据后这个公共列表组件不能自己按各自页签区分，等同于各页签再同时使用这一个list组件，似乎是有缓存的问题， 下面是list组件的代码：

<van-pull-refresh v-model="refreshing" @refresh="onRefresh" :success-duration="1000" loading-text="正在刷新，请稍后" :success-text="successText">  
 <van-list v-model="loading"  
  :finished="finished"  
  finished-text="没有更多了"  
  loading-text=""  
  @load="onLoad"  
  :offset="10"  
>  
 <van-cell v-for="item in listData" :key="item.uuid" @click="getDetail(item)">  
  <template> 
   <div class="van-cell-image" v-if="item.pic">  
    <img :src="item.pic" alt=""\>  
   </div> 
   <div class="van-cell-title">  
    <div class="title">{{item}}</div>   
   </div> 
  </template> 
 </van-cell> 
  </van-list> 
 </van-pull-refresh>

也看了相关的demo示例，问题在于我这里tab是根据后台数据动态循环加载的，tab中的列表内容因为样式完全一样所以也想用一个公共组件并根据不同tab类型来获取各类频道的列表数据，如此比较灵活，而示例中一般都是静态固定tab页签对应固定的内容，没有找到合适的解决办法。。。

Answer 1

上拉加载，有几个tab 请求几次接口的问题。是数据缓存的问题 每切换需要 清空 listData 重置 page = 1 应该是可以的

这样就不能多个缓存了 能说说你解决的思路吗？

谢谢

Answer 2

请问楼主解决了吗，我现在也碰到这个问题，还望帮忙解答，谢谢！！

Answer 3

请问楼主解决了吗？求教