使用mixins封装vue列表页的上拉加载功能

在java里，可以使用继承的方式，写一个父类封装通用的方法属性，来达到代码复用的目的。例如，可以写一个包含列表页加载更多相关的通用方法和属性的父类，让每一个包含加载更多的列表页面继承此父类。

在vue里可以通过mixins实现相同的功能。这里以使用mixins封装vue列表页的上拉加载功能为例：

1、先创建一个包含上拉加载列表页通用方法、属性的LoadMore.ts的混入对象

import { Component, Vue } from "vue-property-decorator";

@Component({
  name: "LoadMore",
})
export default class LoadMore extends Vue {
  pageNo: number = 1;
  pageSize: number = 10;
  dataList: Array<any> = [];
  option: any = {}; //接收页面传参
  isLoadFinished: boolean = false; //所有数据加载完毕，没有更多数据

  onLoad(option: any) {
    console.log("LoadMore：onLoad");
    this.option = option;
    this.extendsOnLoad();
    this.initData();
  }

  /**
   * 此方法留给用到此mixins的vue重写
   */
  extendsOnLoad() {}

  /**
   * 加载数据
   */
  initData() {
    this.pageNo = 1;
    this.dataList = [];
    this.isLoadFinished = false;
    this.loadData();
  }

  /**
   * 下拉刷新
   * 1、需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh
   * 2、当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新
   */
  onPullDownRefresh() {
    console.log("LoadMore：下拉刷新了");
    this.initData();
  }

  /**
   * 上拉加载：滑动到底部加载更多
   * 可以在pages.json里定义具体页面底部的触发距离onReachBottomDistance，比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件，不配置默认为0
   */
  onReachBottom() {
    if (!this.isLoadFinished) {
      console.log("加载更多");
      this.pageNo++;
      this.loadData();
    } else {
      uni.showToast({ title: "没有更多数据了！", icon: "none" });
    }
  }

  /**
   * 此方法留给用到此mixins的vue重写，调用接口加载数据
   */
  loadData() {}

  /**
   * 填充数据
   */
  fillData(dataList: Array<any>) {
    if (dataList.length == 0) {
      if (this.pageNo == 1) {
        this.dataList = [];
      } else {
        this.isLoadFinished = true;
      }
      return;
    }
    this.dataList = this.dataList.concat(dataList);
    if (dataList.length < this.pageSize) {
      this.isLoadFinished = true;
    }
  }

  showLoading() {
    uni.showLoading({
      title: "数据加载中...",
      mask: true,
    });
  }

  hideLoading() {
    uni.hideLoading();
  }
}

2、在包含加载更多的列表页引入定义的混入对象：

<template>
  <view class="container">
    <view v-for="(str, index) in dataList" :key="index" class="item">
      <text class="f18 t0">{{ str }}</text>
    </view>

    <u-divider height="80" fontSize="30" v-if="isLoadFinished">我是有底线的</u-divider>
  </view>
</template>

<script lang="ts">
import { Component, Vue, Mixins } from "vue-property-decorator";
import LoadMore from "./mixins/LoadMore";

@Component({
  components: {},
})
// export default class MyList extends Vue {
export default class MyList extends Mixins(LoadMore) {
  private DATA: Array<string> = [];

  extendsOnLoad() {
    for (let i = 0; i < 35; i++) {
      this.DATA.push("数据---" + i);
    }
  }

  loadData() {
    this.showLoading();

    setTimeout(() => {
      //模拟异步加载数据
      let dataList: Array<string> = [];
      if (this.pageNo > 3) {
        dataList = this.DATA.slice(30, 35);
      } else {
        let startIndex = (this.pageNo - 1) * this.pageSize;
        let endIndex = this.pageNo * this.pageSize;
        dataList = this.DATA.slice(startIndex, endIndex);
      }
	  
	  //填充数据
      this.fillData(dataList);

      this.hideLoading();
    }, 2000);
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;

  .item {
    height: 66px;
    line-height: 66px;
    padding-left: 20px;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
  }
}
</style>

这样，通过引入包含上拉加载列表页通用方法、属性的混入对象LoadMore.ts，可以实现各个包含加载更多的页面页达到简化代码的目的。

不了解mixins的看一下：mixins使用方法和注意点