消息下拉加载bug修改

src/views/contentManagement/notice.vue

@@ -1,21 +1,16 @@
 <template>
   <div class="notice-main">
     <div class="list">
-      <div :class="type==0 ?'on':''" @click="tabChange(0)">
-        <el-badge :value="countObj[0]" class="item" > 增员消息 </el-badge>
+      <div :class="type == 0 ? 'on' : ''" @click="tabChange(0)">
+        <el-badge :value="countObj[0]" class="item"> 增员消息 </el-badge>
       </div>
-      <div :class="type==1 ?'on':''" @click="tabChange(1)">
-        <el-badge :value="countObj[1]" class="item" > 待我审批 </el-badge>
+      <div :class="type == 1 ? 'on' : ''" @click="tabChange(1)">
+        <el-badge :value="countObj[1]" class="item"> 待我审批 </el-badge>
       </div>
     </div>
     <div class="message">
       <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
-        <li
-          v-for="item in messageList"
-          :key="item.id"
-          class="infinite-list-item"
-          @click="readMessage(item)"
-        >
+        <li v-for="item in messageList" :key="item.id" class="infinite-list-item" @click="readMessage(item)">
           <p>
             <span>{{ item.createTime.split(" ")[1] }}</span>
             <b>{{ item.title }}</b>
@@ -44,10 +39,11 @@ const pageInfo = reactive({
   pageNum: 1,
 });
 const load = () => {
+  if(messageList.value.length >= total.value) return;
   // count.value += 2
-  pageInfo.pageSize += 10;
+  pageInfo.pageNum += 1;
   getMessageList();
-  
+
 };
 //消息tab切换
 
@@ -57,15 +53,16 @@ const load = () => {
 interface Message {
   [key: string]: any;
 }
-const type=ref(0)
+const type = ref(0)
 
 
-function tabChange(num:number){
-  type.value=num
+function tabChange(num: number) {
+  type.value = num
   getMessageList();
 }
 
 const messageList = ref<Message>([]);
+const total = ref(0)
 function getMessageList() {
   api.contentApi
     .messageList({
@@ -75,7 +72,8 @@ function getMessageList() {
     })
     .then((res: any) => {
       if (res.code === 200) {
-        messageList.value = res.data.records;
+        messageList.value.push(...res.data.records)
+        total.value = res.data.total;
       }
     });
 }
@@ -113,34 +111,41 @@ function readMessage(item: any) {
   // background: #fff;
   padding: 15px;
   box-sizing: border;
-  > div {
+
+  >div {
     flex: none;
     background: #fff;
     min-height: 800px;
   }
-  > div.list {
+
+  >div.list {
     width: 15%;
     border-right: 1px solid #ccc;
-    > div {
-      padding: 15px; 
+
+    >div {
+      padding: 15px;
       box-sizing: border-box;
       cursor: pointer;
 
     }
-    .on{
+
+    .on {
       background: #ccc;
     }
   }
-  > div.message {
+
+  >div.message {
     flex: 1;
   }
 }
+
 .infinite-list {
   height: 800px;
   padding: 0;
   margin: 0;
   list-style: none;
 }
+
 .infinite-list .infinite-list-item {
   // display: flex;
   align-items: center;
@@ -150,35 +155,41 @@ function readMessage(item: any) {
   margin: 10px;
   // color: var(--el-color-primary);
   border-bottom: 1px solid #ccc;
+
   p {
     display: flex;
     align-items: center;
-    > span {
+
+    >span {
       display: flex;
       width: 100px;
       justify-content: flex-end;
       color: #ccc;
       font-size: 12px;
     }
-    > b {
+
+    >b {
       display: flex;
       font-weight: normal;
       padding-left: 50px;
       box-sizing: border-box;
     }
   }
+
   .onRead {
     b {
       color: #ccc;
     }
   }
+
   .ontRead {
     b {
       color: #000;
     }
   }
 }
-.infinite-list .infinite-list-item + .list-item {
+
+.infinite-list .infinite-list-item+.list-item {
   margin-top: 10px;
 }
 </style>