element 无限滚动 InfiniteScroll

element 中InfiniteScroll 无限滚动 的应用

不废话，直接上
无线滚动就是分页请求，把所有数据合并到一个数组里。

 <div class="infinite-list-wrapper" style="overflow:auto">
    <ul
      class="list"
      v-infinite-scroll="load"
      infinite-scroll-disabled="disabled">
      <li v-for="i in count" class="list-item">
        <span>{{ i.username }}</span>
        <span>{{ i.createTime }}</span>
      </li>
    </ul>
    <p v-if="loading">加载中...</p>
    <p v-if="noMore">没有更多了</p>
</div>

import { getDownRecord } from '@/api/xxx';

export default {
  name: 'xxx',
  data() {
    return {
      num: 1,
      count: [],
      loading: false,
      totalPage: "",
    }
  },
  computed: {
    noMore() {
      // 当起始页数大于等于总页数时停止加载
      return this.num >= this.totalPage;
    },
    disabled() {
      return this.loading || this.noMore;
    }
  },
  mounted() {
    this.getRecord()
  },
  methods: {
    load() {
      //滑到底部时进行加载
      this.loading = true;
      setTimeout(() => {
        this.num += 1; //滚动条到底时，页码自增 1
        this.getRecord(); //调用接口
      }, 500);
    },
    // 下载记录数据请求
    getRecord() {
      let params = {
        "pageCurrent": this.num,
        "pageSize": 10
      }
      getDownRecord(params).then(res => {
        if (res.data.code === 200) {
            this.count = [...this.count, ...res.data.data.list]; //合并数组
            this.totalPages = res.data.data.totalPage
            this.loading = false;
        } else {
           this.$message({
             message: res.data.msg,
             type: 'error',
             duration: 2000
           });
        }
      })
    },
  }
}