<template>
  <div class="page-infinite">
    <!-- <h1 class="page-title">Infinite Scroll</h1> -->
    <co-header fixed title="Infinite Scroll">
      <fallback slot="left"></fallback>
    </co-header>
    <p class="page-infinite-desc page-content-main">当即将滚动至列表底部时, 自动加载更多数据</p>
    <div class="page-infinite-wrapper co-wrapper" ref="wrapper">
      <ul class="page-infinite-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="50">
        <co-cell v-for="(item, i) in list" :key="i"
         :title="'测试数据-'+item" class=""></co-cell>
      </ul>
      <p v-show="loading" class="page-infinite-loading">
        <co-spinner type="fading-circle"></co-spinner>
        加载中...
      </p>
    </div>
  </div>
</template>

<style lang="less">
  .page-infinite-desc {
    text-align: center;
    color: #666;
    padding-bottom: 5px;
    border-bottom: solid 1px #eee;
  }

  .page-infinite-listitem {
    height: 50px;
    line-height: 50px;
    border-bottom: solid 1px #eee;
    text-align: center;
    &:first-child {
      border-top: solid 1px #eee;
    }
  }

  .page-infinite-wrapper {
    margin-top: -1px;
    overflow: scroll;
  }

  .page-infinite-loading {
    text-align: center;
    height: 50px;
    line-height: 50px;

    div {
      display: inline-block;
      vertical-align: middle;
      margin-right: 5px;
    }
  }
</style>

<script type="text/babel">
  export default {
    data() {
      return {
        list: [],
        loading: false
      };
    },

    methods: {
      loadMore() {
        this.loading = true;
        setTimeout(() => {
          let last = this.list[this.list.length - 1] || 0;
          for (let i = 1; i <= 20; i++) {
            this.list.push(last + i);
          }
          this.loading = false;
        }, 1500);
      }
    }
  };
</script>
