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();
  }
}

1. 组件，这里用的uniapp

<myJobList @refresh="onRefresh" @loadMore="loadMore">
      <myJobListItem v-for="it in listData" :data="it" v-key="it.id"></myJobListItem>
</myJobList>

<script>
import myJobListItem from 'widgets/my-job-list-item.vue';
import myJobList from 'widgets/my-job-list.vue';
import { ListMoreDataMixin } from 'list-more-data-mixin.js';

export default {
  components: { myJobListItem, myJobList },
  mixins: [ListMoreDataMixin],
  methods: {
    // ListMoreDataMixin
    async getData() {
      return new Promise(res => {
        this.postHttp({
          url: '/api/xxx',
          data: {},
          success(r) {
            res(r.data);
          }
        });
      });
    },
  }
};
</script>

1. myJobList

<template>
  <scroll-view
    style="height: 100%;"
    scroll-y="true"
    scroll-with-animation="true"
    refresher-enabled="true"
    :refresher-triggered="isRefresh"
    @refresherrefresh="refresherrefresh"
    @scrolltolower="lower"
  >
    <slot></slot>
  </scroll-view>
</template>

<script>
export default {
  name: 'my-job-list',
  data() {
    return {
      isRefresh: false
    };
  },
  methods: {
    lower(e) {
      this.$emit('loadMore')
    },

    /**
     * 下拉刷新
     */
    refresherrefresh() {
      this.isRefresh = true;
      this.$emit('refresh', () => {
        this.isRefresh = false;
      });
    }
  }
};
</script>