
Navbar和Infinite scroll共同使用时会出现无限加载的问题,滑动也会出现乱加载。
只需要判断一下就可以了,代码:
html:
<mt-navbar v-model="selected">
<mt-tab-item id="aa" @click.native.prevent="showAA">option A</mt-tab-item>
<mt-tab-item id="bb" @click.native.prevent="showBB">option B</mt-tab-item>
</mt-navbar> <mt-tab-container v-model="selected">
<mt-tab-container-item id="aa">
<ul v-if="selected == 'aa'" v-infinite-scroll="addAAList" infinite-scroll-disabled="aaloading" infinite-scroll-distance="10">
<li v-for="i in arr1">{{i}}</li>
</ul>
</mt-tab-container-item>
<mt-tab-container-item id="bb">
<ul v-if="selected == 'bb'" v-infinite-scroll="addBBList" infinite-scroll-disabled="bbloading" infinite-scroll-distance="10">
<li v-for="i in arr2">{{i}}</li>
</ul>
</mt-tab-container-item>
...
</mt-tab-container>
js:
data() {
return {
selected: 'aa',
arr1: [],
aal: false,
...
}
}, methods: {
showAA() {
this.aal = true;
for (let i = 0; i < 10; i++) {
this.arr1.push('AA = ' + (this.arr1.length + 1));
}
this.aal = false;
},
showBB() {
...
},
},