添加触底更多逻辑，获取分页数据

inspur-ui/src/views/meeting_pad.vue

@@ -29,7 +29,7 @@
       </div>
     </div>
     <div class="content-class">
-      <div class="display-row" style="flex-wrap: wrap;overflow: scroll;padding-top: 16px;padding-left: 16px;">
+      <div class="display-row" style="flex-wrap: wrap;padding-top: 16px;padding-left: 16px;   height: 102%;overflow-y: auto;align-content: flex-start;" @scroll="handleScroll">
         <div v-for="item,index in meetingList" class="content-item display-cloumn"
           style="margin-right:16px;margin-bottom: 16px;padding: 12px;justify-content: space-between;">
           <div class="display-row">
@@ -105,7 +105,7 @@
         // 查询参数
         queryParams: {
           pageNum: 1,
-          pageSize: 12,
+          pageSize: 15,
           beginTime: null,
           endTime: null,
           address: null,
@@ -150,9 +150,34 @@
         });
 
       },
+      handleScroll(event) {
+        // 获取div元素
+        const { target } = event;
+
+        // 计算滚动位置是否到达底部
+        if (target.scrollHeight - target.scrollTop <= target.clientHeight) {
+          this.loadMore();
+        }
+      },
+      loadMore(){
+        console.log("loadMore");
+        if(this.total <= this.meetingList.length){
+          console.log("不拉数据")
+          return;
+        }
+        this.queryParams.pageNum = this.queryParams.pageNum+1;
+        this.loading = true;
+        listMeeting(this.queryParams).then(response => {
+          console.log(response.rows);
+          this.meetingList.push(...response.rows);
+          this.total = response.total;
+          this.loading = false;
+        });
+      },
       /** 查询党员会议列表 */
       getList() {
         this.loading = true;
+        this.queryParams.pageNum = 1;
         listMeeting(this.queryParams).then(response => {
           this.meetingList = response.rows;
           console.log(this.meetingList);
@@ -291,7 +316,8 @@
 
   .content-item {
     width: calc((100% - 48px)/3);
-    aspect-ratio: 259/128;
+    // aspect-ratio: 259/128;
+    height: 128px;
     border-radius: 4px;
     background: #FFFFFF;
     border: 1px solid #E5E8EF;