点击加载修改为滚动加载

package-lock.json

@@ -28,6 +28,7 @@
         "vue": "^2.6.12",
         "vue-awesome-swiper": "^4.1.1",
         "vue-i18n": "^8.22.2",
+        "vue-infinite-loading": "^2.4.5",
         "vue-loader": "^15.9.5",
         "vue-meta-info": "^0.1.7",
         "vue-router": "^3.4.9",
@@ -12497,6 +12498,14 @@
       "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.22.2.tgz",
       "integrity": "sha512-rb569fVJInPUgS/bbCxEQ9DrAoFTntuJvYoK4Fpk2VfNbA09WzdTKk57ppjz3S+ps9hW+p9H+2ASgMvojedkow=="
     },
+    "node_modules/vue-infinite-loading": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/vue-infinite-loading/-/vue-infinite-loading-2.4.5.tgz",
+      "integrity": "sha512-xhq95Mxun060bRnsOoLE2Be6BR7jYwuC89kDe18+GmCLVrRA/dU0jrGb12Xu6NjmKs+iTW0AA6saSEmEW4cR7g==",
+      "peerDependencies": {
+        "vue": "^2.6.10"
+      }
+    },
     "node_modules/vue-loader": {
       "version": "15.9.5",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.5.tgz",
@@ -24268,6 +24277,12 @@
       "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.22.2.tgz",
       "integrity": "sha512-rb569fVJInPUgS/bbCxEQ9DrAoFTntuJvYoK4Fpk2VfNbA09WzdTKk57ppjz3S+ps9hW+p9H+2ASgMvojedkow=="
     },
+    "vue-infinite-loading": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/vue-infinite-loading/-/vue-infinite-loading-2.4.5.tgz",
+      "integrity": "sha512-xhq95Mxun060bRnsOoLE2Be6BR7jYwuC89kDe18+GmCLVrRA/dU0jrGb12Xu6NjmKs+iTW0AA6saSEmEW4cR7g==",
+      "requires": {}
+    },
     "vue-loader": {
       "version": "15.9.5",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.5.tgz",

package.json

@@ -91,6 +91,7 @@
     "vue": "^2.6.12",
     "vue-awesome-swiper": "^4.1.1",
     "vue-i18n": "^8.22.2",
+    "vue-infinite-loading": "^2.4.5",
     "vue-loader": "^15.9.5",
     "vue-meta-info": "^0.1.7",
     "vue-router": "^3.4.9",

src/pages/showcase/index.vue

@@ -19,9 +19,7 @@
             <img :src="item.avatar + '?x-oss-process=image/resize,m_fill,h_360,w_300'" class="pic" />
           </div>
         </div>
-        <div style="text-align:center" v-if="hasMore">
-          <el-button :loading="false" @click="loadmore">加载更多</el-button>
-        </div>
+        <infinite-loading @infinite="infiniteHandler"></infinite-loading>
       </div>
       <app-upload-avatar v-if="showIndex === 2"></app-upload-avatar>
     </div>
@@ -29,17 +27,17 @@
 </template>
 
 <script>
+import InfiniteLoading from 'vue-infinite-loading'
 import AppUploadAvatar from './uploadAvatar.vue'
 import { getAvatarList } from '@/api/my.js'
 export default {
-  components: { AppUploadAvatar },
+  components: { InfiniteLoading, AppUploadAvatar },
   data() {
     return {
       showIndex: 1,
       list: [],
       page: 1,
-      false: false,
-      hasMore: true
+      busy: false
     }
   },
   watch: {
@@ -53,28 +51,22 @@ export default {
     }
   },
   beforeMount() {
-    this.getAvatarList()
+    // this.getAvatarList()
   },
   methods: {
     tap(n) {
       this.showIndex = n
     },
-    getAvatarList() {
-      this.loading = true
-      getAvatarList({ page: this.page, page_size: 18 })
-        .then(response => {
-          if (response.list.length < 18) {
-            this.hasMore = false
-          }
+    infiniteHandler($state) {
+      getAvatarList({ page: this.page, page_size: 18 }).then(response => {
+        if (response.list.length) {
+          this.page += 1
           this.list = this.list.concat(response.list)
+          $state.loaded()
+        } else {
+          $state.complete()
+        }
       })
-        .finally(() => {
-          this.loading = false
-        })
-    },
-    loadmore() {
-      this.page++
-      this.getAvatarList()
     }
   }
 }