add infinite scroll support

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

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,14 +27,19 @@ export default {
     return {
       events: [],
       currentPage: 0,
-      maxPage: 0,
+      busy: false,
+      allLoaded: false
     };
   },
   methods: {
     mdRender(mdStr) {
       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;
         });
     },
   },

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