1、v-infinite-scroll="load" //load無限滾動(dòng)加載的方法
 2、infinite-scroll-disabled //是否禁用無限滾動(dòng)加載
 3、infinite-scroll-delay //節(jié)流時(shí)延，單位為ms
 4、infinite-scroll-distance //觸發(fā)加載的距離閾值，單位為px
 5、infinite-scroll-immediate //是否立即執(zhí)行加載方法，以防初始狀態(tài)下內(nèi)容無法撐滿容器。
 //默認(rèn)情況下，infinite-scroll-disabled是false，因此如果組件使用無限滾動(dòng)加載組件，即使在vue不進(jìn)行加載方法的調(diào)用，組件也會(huì)調(diào)用該方法，因此如果需要控制的話，盡量是使用infinite-scroll-disabled屬性來進(jìn)行加載方法是否調(diào)用的控制。

<template>
  <div class="vue-class-name">
    <div
      v-infinite-scroll="load"
      :infinite-scroll-disabled="isInfiniteScrollDisabled"
      style="margin-bottom: 20px;height:640px;overflow-y:auto"
    >
      <div
        v-for="item in dataList"
        :key="item.index"
        style="display: inline-block;margin:0px 10px 10px 0px"
      >
        <span>{{item}}</span>
      </div>
      <el-empty
        description="No Data"
        v-if="dataList.length == 0"
        style="height:650px;overflow-y:auto;text-align:center"
      ></el-empty>
      
      <!-- 這個(gè)div一定要放在使用指令的div里面-->
      <div align="center" v-if="dataList.length > 0"> 
        <div class="drawer-footer">
          <span v-if="pullStatus === $enum.STATUS.START">
            Pull up to load more
          </span>
          <span v-if="pullStatus === $enum.STATUS.LOADING">
            loading
            <i class="el-icon-loading"></i>
          </span>
          <span v-if="pullStatus === $enum.STATUS.NODATA">
            no more data
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'VueName',
  mixins: [],
  components: {},
  props: {},
  data: function() {
    return {
     pullStatus: this.$enum.STATUS.START,
     pageIndex: 1,
     pageSize: 20,
     dataList: [],
     isInfiniteScrollDisabled: false,
    };
  },
  computed: {},
  watch: {
  //事件監(jiān)聽：當(dāng)刷新瀏覽器頁面或者切換項(xiàng)目的時(shí)候進(jìn)行方法調(diào)用
    projectSpaceId: function(value, oldValue) {
      this.dataList = [];
      this.pageIndex = 1;
      this.pullStatus = this.$enum.STATUS.START;
      this.getLoadMoreData();
    },
  },
  created() {},
  mounted() {
  //一進(jìn)入頁面進(jìn)行方法調(diào)用
    this.getLoadMoreData();
  },
  methods: {
    getLoadMoreData() {
      if (this.pullStatus !=  this.$enum.STATUS.START) {
       return;
       }
      this.pullStatus = this.$enum.STATUS.LOADING;
      this.isInfiniteScrollDisabled = true;
      let params = {};//請(qǐng)求參數(shù)，可省略
      this.getData(params).then(resp => {
        if (data.length < this.pageSize ) {
                this.pullStatus = this.$enum.STATUS.NODATA;
            } else {
                this.pageIndex++;
                this.pullStatus = this.$enum.STATUS.START;
            }
        if (resp.data.length > 0) {
          this.dataList = this.dataList.concat(resp.data);//數(shù)組拼接，得到拼接后的數(shù)據(jù)
        }
        this.isInfiniteScrollDisabled = false;
      });
    },
  },
  beforeDestroy() {
    this.dataList = []; //清空數(shù)組
};
</script>
<style scoped></style>

//常量定義
export const STATUS= {
  START: 0, // 上拉加載
  LOADING: 1, // 加載中
  NODATA: 2, // 沒有更多數(shù)據(jù)
};

<div class="drawer-footer">
          <span v-if="pullStatus === $enum.STATUS.START">
            Pull up to load more
          </span>
          <span v-if="pullStatus === $enum.STATUS.LOADING">
            loading
            <i class="el-icon-loading"></i>
          </span>
          <span v-if="pullStatus === $enum.STATUS.NODATA">
            no more data
          </span>
        </div>

/** 
 * 頁面無限滾動(dòng)加載
*/
export default  {
    name: "infiniteScrollMixins",
    data() {
        return {
            pullStatus: this.$enum.STATUS.START,
            pageIndex: 1,
            pageSize: 20,
        }
    },
    computed:  {},
    created() {},
    methods: {
        loadMoreData() {
            if (this.pullStatus !=  this.$enum.STATUS.START) {
                return;
            }
            this.pullStatus = this.$enum.STATUS.LOADING;
            if(this.getLoadMoreData) {
            //使用該mixins的組件需要定義該方法
                this.getLoadMoreData();
            }
        },

        setPullStatus(data = []) {
            if (data.length < this.pageSize ) {
                this.pullStatus = this.$enum.STATUS.NODATA;
            } else {
                this.pageIndex++;
                this.pullStatus = this.$enum.STATUS.START;
            }
        }
    },
    beforeDestroy() {},
};