Add paging

package.json

@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "axios": "^0.17.1",
+    "lodash": "^4.17.4",
     "sweetalert": "^2.0.8",
     "vue": "^2.5.3"
   }

src/content/components/expression-list.vue

@@ -1,10 +1,11 @@
 <template>
-  <div class="cpt-expression-list">
+  <div class="cpt-expression-list" @scroll="requestExpression">
     <expression v-for="exp in data" :key="exp.link" :exp="exp"></expression>
   </div>
 </template>
 
 <script>
+import debounce from 'lodash/debounce'
 import Expression from './expression'
 import crun from '@/common/crun'
 
@@ -18,7 +19,8 @@ export default {
       data: [],
       size: 50,
       page: 1,
-      tatal: 0
+      total: 0,
+      loading: false
     }
   },
 
@@ -41,18 +43,28 @@ export default {
     reset () {
       this.data = []
       this.page = 1
-      this.tatal = 0
+      this.total = 0
     },
 
+    requestExpression: debounce(function ({ target }) {
+      const { data, total, loading } = this
+      if (data.length === total || loading) return
+      const { scrollHeight, offsetHeight, scrollTop } = target
+      if (scrollTop + offsetHeight >= scrollHeight) {
+        this.page += 1
+      }
+    }, 400),
+
     fetchExpression () {
       if (!this.query) return
       crun.$emit('fetch-expression', this.params)
         .then(this.receiveExpression)
     },
 
-    receiveExpression ({ data = [], tatal = 0 }) {
-      this.tatal = tatal
+    receiveExpression ({ data = [], total = 0 }) {
+      this.total = total
       this.data = this.data.concat(data)
+      this.loading = false
     }
   },