vue实现下拉懒加载

<template>
<div
      class="ele-body infinite-wrapper"
      style="height: calc(100vh - 235px); overflow: auto"
    >
      
      <div class="columns" v-loading="loading">
        <div v-for="(item, index) in tabData" :key="index">
          <span v-text="item"></span>
        </div>
      </div>
      <infinite-loading
        spinner="spiral"
        @infinite="infiniteHandler"
        :identifier="infiniteId"
        :distance="200"
        class="infinite-loading-wrap"
        force-use-infinite-wrapper=".infinite-wrapper"
      >
        <div slot="spinner">正在加载...</div>
        <div slot="no-more">没有更多啦</div>
        <div slot="no-results">无结果数据</div>
        <div slot="error"> 错误数据 </div>
      </infinite-loading>
</div>
</template>
<script>
import InfiniteLoading from 'vue-infinite-loading';

export default {
    components: { InfiniteLoading },
data() {
      return {
            tabData: [],
            tablePage: {
              total: 0,
              currentPage: 1,
              pageSize: 12
            },
            pagination: {
              total: 0,
              // 第几页
              page: 1,
              // 每页显示条数
              limit: 12
            },
        }
},
methods: {
    // 下拉加载
      infiniteHandler($state) {
        let params = {
          projectId: this.id,
          current: this.tablePage.currentPage,
          pageSize: this.tablePage.pageSize
          // startDate: this.startDate,
          // endDate: this.endDate,
          // ...this.where
        };
        this.loading = true;
        queryMaterialTaskInfoList(params)
          .then((list) => {
            this.loading = false;
            if (list.data.length) {
              this.tablePage.currentPage += 1;
              this.tabData = this.tabData.concat(list.data);
              $state.loaded();
            } else {
              $state.complete();
            }
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      },
}
</script>

<style scoped>
  .columns {
    /* 设置或检索对象每列的宽度 */
    /* column-width: 390px; */
    column-width: 390px;
    -moz-column-width: 390px; /* Firefox */
    -webkit-column-width: 390px; /* Safari and Chrome */
    /* 设置或检索对象的列与列之间的间隙 */
    column-gap: 5px;
  }
  .columns div {
    /* 避免在元素内部断行并产生新列 */
    /* -webkit-column-break-inside: avoid; */
    -webkit-column-break-inside: avoid;
  }
  /* 滚动下拉加载提示样式 */
  .infinite-loading-container {
    margin-top: 2px;
  }
</style>
        

 

安装
npm install vue-infinite-loading --save

参考连接：https://www.dandelioncloud.cn/article/details/1566069813787455490