<template>
  <div class="page-loadmore">
    <!-- <h1 class="page-title">Pull up</h1> -->
    <co-header fixed title="Pull up">
      <fallback slot="left"></fallback>
    </co-header>
    <div class="co-wrapper">
      <p class="page-loadmore-desc page-content-main">在列表底部, 按住 - 上拉 - 释放可以获取更多数据</p>
      <p class="page-loadmore-desc">此例请使用手机查看</p>
      <co-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
        <co-cell v-for="(item, i) in list" :key="i"
        :title="'测试数据-'+item" class=""></co-cell>
      </co-loadmore>
    </div>
  </div>
</template>

<script type="es6">
  export default {
    data() {
      return {
        list: [],
        allLoaded: false
      };
    },

    methods: {

      loadBottom() {
        setTimeout(() => {
          let lastValue = this.list[this.list.length - 1];
          if (lastValue < 40) {
            for (let i = 1; i <= 10; i++) {
              this.list.push(lastValue + i);
            }
          } else {
            this.allLoaded = true;
          }
          this.$refs.loadmore.onBottomLoaded();
        }, 1500);
      }
    },

    created() {
      for (let i = 1; i <= 20; i++) {
        this.list.push(i);
      }
    }
  };
</script>

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