Vue自動翻頁插件簡易教程（vue-infinite-loading）

背景略。

安裝

插件首頁：

https://www.npmjs.com/package/vue-infinite-loading

安裝方法：

npm i vue-infinite-loading -S

使用方法

下面我們來演示如何使用Vue的這個插件實施無限級加載（自動翻頁）功能；

首先，我們需要寫一個模板，代碼如下：

<header>
  <!-- Hacker News header -->
</header>

<div v-for="(item, $index) in list" :key="$index">
  <!-- Hacker News item loop -->
</div>

<infinite-loading @infinite="handleLoad"/>

在上面的模板中，我們放了一個infinite-loading組件在新聞列表的底部，同時用’handleLoad’方法來註冊它的infinite事件監聽；

下面，是一些核心代碼邏輯；

import axios from 'axios';

const api = '//hn.algolia.com/api/v1/search_by_date?tags=story';

export default {
  data() {
    return {
      page: 1,
      list: [],
    };
  },
  methods: {
    handleLoad($state) {
      axios.get(api, {
        params: {
          page: this.page,
        },
      }).then(({ data }) => {
        if (data.hits.length) {
          this.page += 1;
          this.list.push(...data.hits);
          $state.loaded();
        } else {
          $state.complete();
        }
      });
    },
  },
};

在上面的腳本中，我們使用了HN Search API和axios來獲取新聞數據。如果API返回一個有非空數組，我們把它直接放入list，同時記錄當前頁碼，通過$state.loaded方法告訴插件我們得到了一些數據。如果服務端接口返回了一個空數組，我們通過$state.complete方法告訴插件所有的數據都被加載了。

完。