<template>
  <div>
    <co-header fixed title="Pull down/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 page-content-main">在列表底部, 按住 - 上拉 - 释放可以获取更多数据</p>
      <cus-loading :load-method="loadAction" :list="list">
        <co-cell v-for="(item, i) in list" :key="i" :title="'测试数据-'+item" class=""></co-cell>
      </cus-loading>
    </div>
  </div>
</template>

<script type="es6">
  // 获取数据
  var getData = (index = 0, callback) => {
    let arr = [];
    for (let i = 1; i <= 10; i++) arr.push(index + i);
    // 模拟数据没有更多数据
    if (index > 28) arr.length = 2;
    // 模拟网络请求，延时回调
    setTimeout(t => callback(arr), 1500);
  };

  export default {
    data() {
      return {
        list: []
      };
    },
    methods: {
      /**
      * 动态数据加载
      * @param {int} data.p 翻页参数，页码
      * @param {int} data.s 翻页参数，每页条数
      * @param {Function} resolve 根据用户上下拉操作自动解析并返回结果
      */
      loadAction({data, resolve}) {
        getData(data.p * data.s, data => {
          this.list = resolve(data);
        });
      }
    }
  };
</script>

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