mint-ui在tab-container使用Infinite scroll 不能触发loadmore ...

直接上代码，基本上就是官网的Infinite scroll外面套上一层tab-container:

<template>
  <div id="focusDetail">
    <mt-header fixed :title="userName">
      <router-link to="/focus" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    <div class="content">
      <mt-navbar class="page-part" v-model="selected">
        <mt-tab-item id="1">one</mt-tab-item>
        <mt-tab-item id="2">two</mt-tab-item>
        <mt-tab-item id="3">three</mt-tab-item>
      </mt-navbar>

      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="1">
          <mt-cell v-for="n in 10" :key="n" :title="'内容 ' + n" />
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
          <mt-cell v-for="n in 4" :key="n" :title="'测试 ' + n" />
        </mt-tab-container-item>
        <mt-tab-container-item id="3">
          <div class="page-infinite">
            <h1 class="page-title">Infinite Scroll</h1>
            <p class="page-infinite-desc">当即将滚动至列表底部时, 自动加载更多数据</p>
            <div class="page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
              <ul class="page-infinite-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="50">
                <li v-for="item in list" class="page-infinite-listitem">{{ item }}</li>
              </ul>
              <p v-show="loading" class="page-infinite-loading">
                <mt-spinner type="fading-circle"></mt-spinner>
                加载中...
              </p>
            </div>
          </div>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        userName: 'test',
        selected: '1',
        list: [],
        loading: false,
        allLoaded: false,
        wrapperHeight: 0
      };
    },
    methods: {
      loadMore() {
        this.loading = true;
        console.log(this.list.length)
        setTimeout(() => {
          let last = this.list[this.list.length - 1];
          for (let i = 1; i <= 10; i++) {
            this.list.push(last + i);
          }
          this.loading = false;
        }, 2500);
      }
    },
    mounted() {
      this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
      for (let i = 1; i <= 20; i++) {
        this.list.push(i);
      }
    }
  };
</script>

<style scoped>
 @component-namespace page {
    @component infinite {
      @descendent desc {
        text-align: center;
        color: #666;
        padding-bottom: 5px;
        border-bottom: solid 1px #eee;
      }
      @descendent list {
        max-height: 100vh;
        overflow-y: auto;
      }
      @descendent listitem {
        height: 50px;
        line-height: 50px;
        border-bottom: solid 1px #eee;
        text-align: center;
        &:first-child {
          border-top: solid 1px #eee;
        }
      }
      @descendent wrapper {
        margin-top: -1px;
        overflow: scroll;
      }
      @descendent loading {
        text-align: center;
        height: 50px;
        line-height: 50px;
        div {
          display: inline-block;
          vertical-align: middle;
          margin-right: 5px;
        }
      }
    }
  }
</style>

原来以为应该很简单,没想到问题来了,加载到32后,不再加载了.

从console里看出,一直在执行,数字一直在往上跳,但页面上却不能滚动加载.

从网上查到,这种情况下,应该加入 v-if="selected == 3"

然后看到,console只输出到40时,页面还是只加载到32.

经过上网找资料与测试,终于发现需要加入: style="max-height: 100vh; overflow-y: auto;"  

然后就正常了.

最终的关键代码如下:

<ul class="page-infinite-list"
 style="max-height: 100vh; overflow-y: auto;"
 v-infinite-scroll="loadMore"
 infinite-scroll-disabled="loading"
 infinite-scroll-distance="50"
 v-if="selected == 3">