uniapp vue mixin使用

• 这个mixin的翻版，主要用来分离处理列表数据逻辑
• 我用了覆写模式

1. 创建mixin ListMoreDataMixin

// 由于没有超类的限制这里要判断下
function ____checkGetData(context) {
  if (!context.getData || typeof context.getData !== 'function') {
    throw new Error(
      '使用[ListMoreDataMixin]必须实现getData函数')
  }
}

export const ListMoreDataMixin = {
  data() {
    return {
      listData: [], // 数据列表
      page: 1, // 1
      isLoading: false, // 是否在加载数据
    }
  },
  methods: {
    // 初始化数据
    async initData() {
      ____checkGetData(this);
      this.isLoading = true
      const data = await this.getData();
      this.listData = data;
      this.isLoading = false;
    },

    // 上拉加载更多
    async loadMore() {
      ____checkGetData(this);
      this.isLoading = true;
      this.page += 1;

      const data = await this.getData();
      
      if (!data.length) {
        this.page--;
      }
      this.listData = [...this.listData, ...data];
      this.isLoading = false;
    },

    // 下拉刷新
    async onRefresh(done) {
     ____checkGetData(this);
      this.page = 1;
      this.listData = await this.getData();
      done()
    }
  },
  mounted() {
    this.initData();
  }
}

2. 组件，这里用的uniapp

3. myJobList