首页底部数据懒加载

src/views1/Retrieval/RetrievalView.vue

@@ -15,9 +15,15 @@
         class="cen—top-img"
       />
     </div>
-    <div class="main">
-      <div v-for="item in count" :key="item.id" class="main-main">
-        <div class="one" @click="docName(item.id,item.content.info.docName)">{{ item.content.info.docName }}</div>
+    <div class="mains"  @scroll="handleScroll">
+      <div
+        v-for="item in count"
+        :key="item.id"
+        class="main-main"
+      >
+        <div class="one" @click="docName(item.id, item.content.info.docName)">
+          {{ item.content.info.docName }}
+        </div>
         <div class="two">
           <div class="two1">
             <img src="../../assets/img/UserCircle.png" />
@@ -42,8 +48,6 @@
         </ul>
       </div>
     </div>
-
-   
   </div>
 </template>
 
@@ -57,25 +61,49 @@ export default {
       input: "",
       //搜索出来的数据
       count: [],
+      page: 0,
+      size: 3
     };
   },
+  mounted() {
+    //添加滚动条事件
+    window.addEventListener("scroll", this.handleScroll, true);
+  },
   methods: {
+    handleScroll() {
+      const container = document.querySelector(".mains");
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      // console.log('scrollHeight',scrollHeight);
+      // console.log('clientHeight',clientHeight);
+      // console.log(scrollTop);
+      // 是否达到页面底部
+      if (scrollTop + clientHeight >= scrollHeight) {
+        // console.log('滚动到底部了！')
+        this.page+=1
+        // 执行加载
+        this.searchs()
+      }
+    },
+
     //查找返回的数据
     searchs() {
-      // ret({content:"项目",page:0,size:10}).then(item=>console.log(item))
-      ret({ content: this.input, page: 0, size: 10 }).then((item) => {
-        this.count = item;
-        // console.log('response cont',this.count);
-      });
+      // console.log('this.input=',this.input)
+      // console.log('this.page=',this.page)
+      // console.log('this.size=',this.size)
+      ret({ content: this.input, page: this.page, size: this.size }).then((item) => {
+        console.log('item=',item)        
+        if (item.length > 0) {
+          this.count.push(...item)
+        }
+      })
     },
     //预览界面
-    docName(curentDocId,curentDocName) {
-
+    docName(curentDocId, curentDocName) {
       this.$tab.openPage(
-        window.open("/individual/Pre/user/" + curentDocId, '_blank'),
-        localStorage.setItem("docName",curentDocName)
-        )
-    }
+        window.open("/individual/Pre/user/" + curentDocId, "_blank"),
+        localStorage.setItem("docName", curentDocName)
+      );
+    },
   },
 };
 </script>
@@ -133,7 +161,7 @@ export default {
       line-height: calc(100vh * (50 / 1080));
     }
   }
-  .main {
+  .mains {
     width: calc(100vw * (1450 / 1920));
     height: calc(100vh * (670 / 1080));
     // background: seagreen;