mint ui解决Navbar和Infinite scroll共存时的bug

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() {
     ... }, },
原文地址:https://www.cnblogs.com/xinchenhui/p/11305888.html