無限滾動效果

<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>