elementui v-infinite-scroll无限滚动 下拉刷新

 一、 组件API

1、v-infinite-scroll="load" //load无限滚动加载的方法
 2、infinite-scroll-disabled //是否禁用无限滚动加载
 3、infinite-scroll-delay //节流时延，单位为ms
 4、infinite-scroll-distance //触发加载的距离阈值，单位为px
 5、infinite-scroll-immediate //是否立即执行加载方法，以防初始状态下内容无法撑满容器。
 //默认情况下，infinite-scroll-disabled是false，因此如果组件使用无限滚动加载组件，即使在vue不进行加载方法的调用，组件也会调用该方法，因此如果需要控制的话，尽量是使用infinite-scroll-disabled属性来进行加载方法是否调用的控制。

二、代码

  <div class="contentList useList" v-infinite-scroll="getLoadMoreData" 
    :infinite-scroll-disabled="isInfiniteScrollDisabled">
        <!-- 下拉刷新区域-->
          <div class="bot_con">
             <UseApp v-for="i in appList" :key="i.name" :detail="i"                 
              @setStarApp="setStarApp" />//调用子组件
          </div>
        <!-- 鼠标下拉刷新时底部显示的状态-->
        <!-- 这个div一定要放在使用指令的div里面-->
        <div class="drawer-footer" v-if="appList.length > 0">
          <div v-if="pullStatus === STATUS.START">
           下拉刷新
          </div >
          <div v-if="pullStatus === STATUS.LOADING">
               <i class="el-icon-loading"></i>//加载中
          </div>
          <div v-if="pullStatus === STATUS.NODATA">
            没有更多数据
          </div>
       </div>
 </div>

 定义数据

 data() {
    return {
      STATUS: {
        START: 0, // 上拉加载
        LOADING: 1, // 加载中
        NODATA: 2, // 没有更多数据
      },
      isInfiniteScrollDisabled: false,
      pullStatus: 0,
    };
  },

调用方法 

 methods: {
     getLoadMoreData() {
      //调用查询接口
      this.searchApp(this.params);
    },
     // 初始化数据，在每次调用查询接口时都调一次
    initData() {
      this.pullStatus = this.STATUS.START;
      this.appList = [];
      this.page.pageIndex = 1;
    },
        // 查询应用
    async searchApp(params) {
      if (this.pullStatus != this.STATUS.START) {
        return;
      }
      this.pullStatus = this.STATUS.LOADING;
      this.isInfiniteScrollDisabled = true;
      let res;
      if (this.ifuseApp === 'use') {
        res = await this.dispatch(调用接口)
      } else {
        res = await this.dispatch(调用接口)
      }
      if (!res.error) {
        if (res.data.data.length < this.page.pageSize) {
          this.pullStatus = this.STATUS.NODATA;
        } else {
          this.page.pageIndex++;
          this.pullStatus = this.STATUS.START;
        }
        if (res.data.data.length > 0) {
          this.appList = this.appList.concat(res.data.data); //数组拼接，得到拼接后的数据
        } else {
          return false;
        }
        this.isInfiniteScrollDisabled = false;
      }
    },
}

三、避坑点

1、使用无限加载组件的div一定要限定高度（height：xxx（px值和calc都可以）; overflow-y:auto）load加载方法将在拉取底部时才会被执行

2、问题：为什么在vue中并没有在任何生命周期中进行load方法的调用，直接就加载了方法？
答：使用 :infinite-scroll-disabled="isInfiniteScrollDisabled“属性来进行控制。