Fetch 数据请求

Fetch 是一个支持下拉刷新及滚动加载的组件。因为这两个操作最终目的都是为了做数据请求，所以取名“Fetch”。

使用

<template>
  <div class="fetch-demo"
    style="position:absolute;top:0;left:0;bottom:0;right:0;">
    <Fetch @fetch="handleFetch">
      <div
        style="line-height:50px;border-bottom:1px solid #eee;"
        v-for="i in count"
        :key="i"
      >
        {{i}}
      </div>
    </Fetch>
  </div>
</template>

import { Fetch } from 'feart';
export default {
  name: 'fetch-demo',
  components: {
    Fetch,
  },
  data() {
    return {
      count: 20,
    };
  },
  methods: {
    handleFetch(resolve, type) {
      // setTimeout代表数据请求
      setTimeout(() => {
        if (type === 'PULL_REFRESH') {
          this.count = 20;
          resolve();
          return;
        }
        this.count += 20;
        const allLoad = this.count >= 60;
        resolve(allLoad);
      }, 2000);
    },
  },
};

注意事项

Fetch 的高度属性被设置为height: 100%，也就是说其高度由父元素决定，Fetch 自身不会撑起高度。使用 Fetch 时，需要用户为 Fetch 的父元素设置一个高度（通常是屏幕高度）。

Props

Events

NOTE: 根据type（'PULL_REFRESH'|'SCROLL'）获取此次触发回调的事件类型。当数据请求完成候，需要调用resolve()通知组件。对于滚动加载事件，当数据全部加载后调用resolve(true)的时候记得传入true。

主动调用函数（this.$refs.fetch.fn）