移动端miniUI触底加载组件的使用

1.在index.html引入mint-ui的依赖

<!-- mint-ui -->
    <link rel="stylesheet" href="./css/mint-ui-style.css">
    <script src="./js/mint-ui-index.js"></script>

2.在vue.config.js中

configureWebpack: {
        externals: {
           'mint-ui': 'MINT',
        },
}

3.使用【！！！loadMore方法千万不要带参数，切记，切记，切记】

<style lang="scss" scoped>
  .infiniteScrollDemo {
    text-align: center;
    .loading {
      display: flex;
      .loading-icon {
        padding-top: 10px;
        margin: 0 auto;
      }
    }
  }
</style>
<template>
  <div class="infiniteScrollDemo">
    <ul v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10"
        class="page-infinite-list">
      <li v-for="item in list"
          class="page-infinite-listitem">{{ item }}</li>
    </ul>
    <div v-if="loading"
         class="loading">
      <div class="loading-icon">
        <mt-spinner type="fading-circle"
                    color="#26a2ff"
                    class="loading-icon"></mt-spinner>
        <div>加载中</div>
      </div>
    </div>
    <div v-if="showEnd">我是有底线的</div>
  </div>
</template>

<script>
  import { InfiniteScroll, Spinner } from 'mint-ui';
  export default {
    data() {
      return {
        list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
        loading: false,
        showEnd: false
      };
    },
    name: 'infiniteScrollDemo',
    methods: {
      loadMore() {
        this.loading = true;
        if (this.list.length < 100) {
          setTimeout(() => {
            let last = this.list[this.list.length - 1];
            for (let i = 1; i <= 10; i++) {
              this.list.push(last + i);
            }
            this.loading = false;
          }, 1000);
        } else {
          this.loading = false;
          this.showEnd = true;
        }

      }
    }
  }
</script>