mint-ui的tab-container和infinite scroll配合使用会出现无线触发加载的问题,切换到第一个container第二个第三个就会无限加载,切换到第二个第一个和第三个就会无限加载·····大家都是怎么解决的,一个滑动所有的都会乱套
<mt-tab-container-item id="1">
<ul class="list-ul"
v-infinite-scroll="loadMore"
infinite-scroll-disabled="loading"
infinite-scroll-distance="10">
<li class="list-li" v-for="item in list">
</li>
</ul>
</mt-tab-container-item>
<mt-tab-container-item id="2">
<ul class="list-ul"
v-infinite-scroll="loadMore1"
infinite-scroll-disabled="loading1"
infinite-scroll-distance="10">
<li class="list-li" v-for="item in list1">
</li>
</ul>
</mt-tab-container-item>
<mt-tab-container-item id="3">
<ul class="list-ul"
v-infinite-scroll="loadMore2"
infinite-scroll-disabled="loading2"
infinite-scroll-distance="10">
<li class="list-li" v-for="item in list2">
</li>
</ul>
</mt-tab-container-item>
在Infinite-Scroll里面,添加一个v-if=selected == id,把Infinite-scroll和选项卡的id、selected相结合,选中的selected与id对应的时候,才进行对应的Infinite-Scroll。
Infinite-Scroll的代码如下:
<div v-infinite-scroll="loadMore"
infinite-scroll-disabled="loading"
infinite-scroll-distance="10"
class="content"
v-if="selected == 1"