使用 mint-ui 做 Infinite scroll，实现数据加载

no1harm · Oct 31, 2018 · 27c3155 · 27c3155
1 parent c4fe639
commit 27c3155
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 12 deletions.
diff --git a/.babelrc b/.babelrc
@@ -8,5 +8,17 @@
     }],
     "stage-2"
   ],
-  "plugins": ["transform-vue-jsx", "transform-runtime"]
-}
+  "plugins": [
+    "transform-vue-jsx",
+    "transform-runtime",
+    [
+      "component",
+      [
+        {
+          "libraryName": "mint-ui",
+          "style": true
+        }
+      ]
+    ]
+  ]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "mint-ui": "^2.2.13",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1"
   },
@@ -18,6 +19,7 @@
     "babel-core": "^6.22.1",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-loader": "^7.1.1",
+    "babel-plugin-component": "^1.1.1",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-plugin-transform-vue-jsx": "^3.5.0",

diff --git a/src/pages/index/index.html b/src/pages/index/index.html
@@ -74,7 +74,11 @@
           </div>
         </div>
         <div class="hot-goods js-waterfull-wrap" data-src="">
-          <ul class="js-list js-lazy" data-src="">
+          <ul class="js-list js-lazy" 
+            data-src="" 
+            v-infinite-scroll="getLists"
+            infinite-scroll-disabled="loading"
+            infinite-scroll-distance="20">
             <li v-for='list in lists' :key='list.id'>
               <div class="goods-item">
                 <a href="https://h5.youzan.com/v2/showcase/goods?alias=2fwig6rnqfq6m&amp;source=yzapp&amp;f_platform=yzapp">
@@ -89,7 +93,7 @@
               </div>
             </li>
           </ul>
-          <div class="loading-more"><span></span></div>
+          <div class="loading-more" v-show='loading'><span></span></div>
         </div>
         <div class="js-show-find category-guid" style="display: none;"></div>
       </div>

diff --git a/src/pages/index/index.js b/src/pages/index/index.js
@@ -3,19 +3,43 @@ import './index.css'
 import Vue from 'vue'
 import axios from 'axios'
 import url from 'js/api.js'
+import { InfiniteScroll } from 'mint-ui'
+Vue.use(InfiniteScroll)
 
 let app = new Vue({
     el:'#app',
     data:{
-        lists:null
+        lists:null,
+        pageNum:1,
+        pageSize:6,
+        loading:false,
+        allLoaded:false
     },
     created() {
-        axios.post(url.hotLists,{
-            pageNum:1,
-            pageSize:6
-        }).then(res=>{
-            this.lists = res.data.lists
-            console.log(this.lists)
-        })
+        this.getLists()
     },
+    methods:{
+        getLists(){
+            if(this.allLoaded) return
+            this.loading = true
+            axios.post(url.hotLists,{
+                pageNum:this.pageNum,
+                pageSize:this.pageSize
+            }).then(res=>{
+                let curLists = res.data.lists
+                // 判断所有数据是否加载完毕
+                if(curLists.length < this.pageSize){
+                    this.allLoaded = true
+                }
+                if(this.lists){
+                    this.lists = this.lists.concat(curLists)
+                }else{
+                    // 第一次请求数据
+                    this.lists = res.data.lists
+                }
+            })
+            this.loading = false
+            this.pageNum ++
+        }
+    }
 })