【我的作品】调通无限滚动

src/views/material/works/index.vue

@@ -16,7 +16,13 @@
         </div>
       </div>
     </div>
-    <ul class="w-list" v-if="list.length>0">
+    <ul
+      class="w-list"
+      v-if="!(list.length === 0 && !hasMoreData)"
+      v-infinite-scroll="requestMoreData"
+      :infinite-scroll-disabled="!hasMoreData || isRequestingMoreData"
+      infinite-scroll-distance="315"
+    >
       <li class="add-work" @click="add">
         <div class="add-con">
           <div>
@@ -102,8 +108,6 @@ export default {
     }
   },
   mounted(){
-    this.getWorksList()
-  
   },
   watch:{
     // searchKey(){
@@ -112,7 +116,6 @@ export default {
     // }
   },
   methods:{
-
     openShare(data){
       getPanoInfo(data.id, (data) => {
         if (data.scenes.length<=0) {
@@ -160,13 +163,13 @@ export default {
           },
       });
     },
-    getWorksList() {
+    requestMoreData() {
       this.isClickSearch = !!this.searchKey;
       this.isRequestingMoreData = true
       getWorksList(
         {
           pageNum: Math.floor(this.list.length / config.PAGE_SIZE) + 1,
-          pageSize: config.pageSize,
+          pageSize: config.PAGE_SIZE,
           searchKey: this.searchKey,
         },
         (data) => {
@@ -196,6 +199,7 @@ export default {
   width: 100%;
   flex-direction: column;
   .tab{
+    flex: 0 0 auto;
     width: 100%;
     display: flex;
     background: #fff;
@@ -215,6 +219,8 @@ export default {
     }
   }
   .w-list{
+    flex: 1 1 auto;
+    overflow: auto;
     width: 100%;
     flex-wrap: wrap;
     margin-top: 30px;