vue上拉加载vue-infinite-loading

为什么使用vue-infinite-loading呢？

开箱即用，简洁至上的 API、内置加载动画以及良好的兼容性，可立即投入生产！

简直不要太好用，接下来为大家演示如何使用：

首先安装插件

npm install vue-infinite-loading -S

注册全局，因为我用的地方挺多的，这样是为了避免重复注册，大家可以根据自己的实际情况来用

main.js

import InfiniteLoading from 'vue-infinite-loading'; //vue滚动插件

Vue.use(InfiniteLoading)  //注册全局

核心模板

<ul v-for="(fault, $index) in faults">
    …………
</ul>
<infinite-loading :identifier="infiniteId" @infinite="infiniteHandler">
      <span slot="no-more" style="color: #7a7873;">
          我也是有底线的:)
        </span>
</infinite-loading>

export default {
  data() {
    return {
      page: 1
      params:{
            areaId: -1,
            stationId: -1,
            startTime: this.startTime,
            endTime: this.endTime,
            sortField: 'faultStartTime',
            sortOrder: 'desc',
            pageIndex: this.pageIndex,
            pageSize: 10
          },
      infiniteId: +new Date(),
    };
  },
  methods: {
    infiniteHandler($state) {
      axios.get(api)
        .then(({ data }) => {
        if(_faults.length > 0){
              if(this.page === 0){
                this.faults= _faults;
              } else {
                for (var i = 0; i < _faults.length; i++) {
                  this.faults.push(_faults[i]);
                }
              }
              this.pageIndex ++;
              $state.loaded();
            } else {
              $state.complete();
            }
      });
    },
    getFaultList: function(s, e){
        this.getDate(s, e);
        this.pageIndex = 0;
        this.faults = [{
          id: 0,
          faultStartTime: '',
          equipmentName: '',
          faultPropertyDesc: '',
          protectActionCondition: [],
          stadiometry: ''
        }];
        this.infiniteId += 1;
      }
  }
};

getFaultList方法是我的重置查询，业务逻辑：

点击A模块的查询——调用父模块的方法——再用父模块去调用B模块的getFaultList方法

这里就不多做讲解了，如果大家有这方面的需求留言告诉我，我可以在下个博文里告诉大家。

每当 identifier 属性发生变化的时候，该组件就会自行重设。

我们必须在清空列表之后再改变 identifier 属性，否则组件将可能无法在重设之后立即触发 infinite 事件。