vue-infinite-loading

在项目中有的时候会使用分页，有的时候会使用下拉加载数据，分页就用element ui的分页就可以了，下拉加载就可以用vue-infinite-loading。

import InfiniteLoading from "vue-infinite-loading";
components: { InfiniteLoading, fileUpload, discernItem, discernSubtitle },
      <!-- 下拉加载开始 -->
      <infinite-loading
        ref="infiniteLoading"
        :distance="distance"
        :identifier="infiniteId"
        @infinite="infiniteHandler"
      >
        <div slot="spinner">加载中...</div>
        <div slot="no-more">没有更多内容了</div>
        <div slot="no-results">
          暂无数据
        </div>
      </infinite-loading>
      <!-- 下拉加载结束 -->

Distance:距离底部多少距离时触发
每当 identifier 属性发生变化的时候，该组件就会自行重设。
@infinite后跟方法
注：方法就是当前的数据列表concat获取到的数据即可
identifier:配合过滤器和选项卡来使用，值发生变化的时候组件会自己重新设置

that.contentlist = that.contentlist.concat(res.data.list);
            console.log("contentlist------", that.contentlist);
            that.searchParam.pageindex++;
            // console.log("根据时间排序后的数组------", that.finalcontextlist);
            $state.loaded();
          } else {
            $state.complete();
          }
        })
        .catch((error) => {
          $state.complete();
        });

以下是它的加载信息的插槽

 <div slot="spinner">加载中...</div>
 <div slot="no-more">没有更多内容了</div>
 <div slot="no-results">无内容</div>

identifier的实际应用介绍：
配合select选择器来使用，当发生变化的时候组件会自己重新设置。
可以初始化为：+new data()

flag:+new Date(),)

console.log('this.flag------',this.flag)
console.log('this.flag------',typeof(this.flag))

触发的时候

this.flag+=1