From 86d685dd9bd10220e87e88790c2eda216b278352 Mon Sep 17 00:00:00 2001
From: Jiang Wenjian <wenjian.jiang@foxmail.com>
Date: Wed, 12 Aug 2020 18:36:11 +0800
Subject: [PATCH] add infinite scroll support

---
 package.json                |  3 ++-
 src/components/Timeline.vue | 15 +++++++++++++--
 src/main.js                 |  2 ++
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index eed8e4b..eb9edd6 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,8 @@
     "sass-loader": "^9.0.3",
     "sass-resources-loader": "^2.0.3",
     "schema-utils": "^2.7.0",
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "vue-infinite-scroll": "^2.0.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.4.0",
diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
index b880754..906f257 100644
--- a/src/components/Timeline.vue
+++ b/src/components/Timeline.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="hello">
+  <div v-infinite-scroll="loadNextPage" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
     <ul class="timeline">
       <li class="year first">2020</li>
       <li class="event" v-for="e in events" :key="e.id">
@@ -9,6 +9,9 @@
         </span>
         <div class="md-result" v-html="e.htmlContent"></div>
       </li>
+      <li class="event" v-show="allLoaded">
+        - End -
+      </li>
     </ul>
   </div>
 </template>
@@ -24,7 +27,8 @@ export default {
     return {
       events: [],
       currentPage: 0,
-      maxPage: 0,
+      busy: false,
+      allLoaded: false
     };
   },
   methods: {
@@ -32,6 +36,10 @@ export default {
       return md.render(mdStr);
     },
     loadNextPage() {
+      if (this.allLoaded) {
+        return;
+      }
+      this.busy = true;
       axios.default
         .create()
         .get(`/data/data-${this.currentPage}.json`)
@@ -49,13 +57,16 @@ export default {
             }${d.getHours()}:${d.getMinutes()}`;
           });
           this.currentPage = this.currentPage + 1;
+          this.busy = false;
         })
         .catch((err) => {
           if (err.response.status === 404) {
+            this.allLoaded = true;
             console.log("no more data");
           } else {
             console.log("fail");
           }
+          this.busy = false;
         });
     },
   },
diff --git a/src/main.js b/src/main.js
index e3e3d97..711703f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,8 @@
 import Vue from 'vue'
 import App from './App.vue'
 import 'normalize.css'
+const infiniteScroll =  require('vue-infinite-scroll');
+Vue.use(infiniteScroll)
 
 Vue.config.productionTip = false