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

转载于 2019-08-05 22:08:00 发布 · 178 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/xinchenhui/p/11305888.html

收录于

当前文章被以下社区和专栏收录：

本文介绍了一个关于在使用Navbar和Infinitescroll组件时遇到的无限加载及滑动乱加载问题，并提供了解决方案。通过在代码中加入适当的判断逻辑，可以避免加载过程中的混乱，确保组件正确响应用户的操作。

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() {
　　　　　...
      },
    },