zoukankan      html  css  js  c++  java
  • 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() {
         ... }, },
  • 相关阅读:
    CentOS 7
    CentOS
    CentOS 7
    CentOS 7
    Linux目录结构说明
    CentOS 7
    CentOS 7
    Linux——工具参考篇
    Linux工具进阶
    Selenium——UI自动化测试(2)——How to Download & Install Selenium WebDriver (待续)
  • 原文地址:https://www.cnblogs.com/xinchenhui/p/11305888.html
Copyright © 2011-2022 走看看