<template>
  <div class="page-loadmore">
    <!-- <h1 class="page-title">Pull down</h1> -->
    <co-header fixed title="Pull down">
      <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 :top-method="loadTop" :show-top-end="true" 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: []
      };
    },

    methods: {
      loadTop() {
        setTimeout(() => {
          let firstValue = this.list[0];
          for (let i = 1; i <= 10; i++) {
            this.list.unshift(firstValue - i);
          }
          this.$refs.loadmore.onTopLoaded();
        }, 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>
