element的无限滚动配合接口请求数据

无限滚动效果

<template>
  <div class="route-wrapper">
    <ul
      v-infinite-scroll="infiniteScroll"
      // 在要实现滚动加载的列表上上添加v-infinite-scroll，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法。
      :infinite-scroll-disabled="routeLoad || noMore" // 是否禁用(数据到最后时，禁止滚动加载)
      :infinite-scroll-distance="5" // 触发加载的距离阈值，单位为px
      class="all-route">
      <li
        v-for="(item, index) in routeData"
        :key="index"
        class="route-item">
        ...
      </li>
    </ul>
  </div>
</template>
<script>
import { getAirlineList } from '@/api/route';

export default {
  name: 'AllRoute',
  data() {
    return {
      routeData: [],
      noMore: false, // 控制滚动禁用
      routeLoad: false, // 控制滚动禁用
      pageNo: 0, // 页码
      pageSize: 6 // 一页6条
    };
  },
  methods: {
    // 滚动加载方法
    infiniteScroll() {
      this.routeLoad = true;
      this.pageNo += 1; // 页码每次滚动+1
      this.getRouteList();
    },
    // 获取数据
    getRouteList() {
      let para = {
        pageNo: this.pageNo,
        pageSize: this.pageSize
      };
      getAirlineList(para)
        .then(res => {
        // 把每一次滚动加载请求的数据push的routeData数组
          let list = res.data.records;
          for (let i = 0; i < list.length; i++) {
            this.routeData.push(list[i]);
          }
          // 如果请求回来的数据小于pageSize，则说明数据到底了。
          if (list.length < 6) {
            this.noMore = true;
          }
          // 避免数据总条数是pageSize的倍数时，数据到底还会请求一次。
          if (this.routeData.length === res.data.total) {
            this.noMore = true;
          }
          this.routeLoad = false;
        })
        .catch(res => {});
    }
  }
};
</script>
<style lang="scss" scoped>
.route-wrapper {
  .all-route {
    height: 300px;
    overflow-y: auto;
  }
}
</style>