Navbar和Infinite scroll共同使用時會出現無限加載的問題,滑動也會出現亂加載。html
只須要判斷一下就能夠了,代碼:this
html:spa
<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:code
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() {
... }, },