聊天数据分页加载

src/pages/index/ChatPage.vue

@@ -150,6 +150,7 @@
           ref="messageList"
           class="message-list"
           :class="activeMenu === 'settings' ? '' : 'active'"
+          @scroll="handleMessageScroll"
         >
           <div
             v-for="message in contactMessages"
@@ -316,7 +317,7 @@ export default {
     // 选择联系人
     selectContact(contact) {
       this.currentContact = contact;
-      this.getContactMessageList(contact.contactName, 10);
+      this.getContactMessageList(contact.contactName, 10, 0);
 
       // 查看联系人后清除未读数量
       contact.unread = 0;
@@ -334,16 +335,16 @@ export default {
     },
 
     // 获取当前联系人的消息列表
-    getContactMessageList(contactName, limit) {
+    getContactMessageList(contactName, limit, offset) {
       // 获取当前联系人的消息列表
       getContactMessages({
         contactName: contactName,
         limit: limit,
+        offset: offset
       })
         .then((response) => {
           const contactMessages = [];
           const messages = response.data.messages || [];
-          // 把联系人的消息按联系人 id 分组存储
           messages.forEach((item) => {
             contactMessages.push({
               ...item,
@@ -352,7 +353,8 @@ export default {
               time: item.time || item.createdAt,
             });
           });
-          this.contactMessages = contactMessages.reverse();
+          // 将新获取的消息放到现有消息的最前面，用于按时间顺序倒序展示
+          this.contactMessages = contactMessages.reverse().concat(this.contactMessages);
           console.log("contactMessages", contactMessages);
         })
         .catch((error) => {
@@ -456,6 +458,20 @@ export default {
         messageList.scrollTop = messageList.scrollHeight;
       }
     },
+
+    // 处理聊天框滚动事件
+    handleMessageScroll() {
+      const el = this.$refs.messageList;
+      // 滚动到顶部
+      if (el.scrollTop === 0) {
+        console.log("滚动到顶部，加载更多消息");
+
+        this.getContactMessageList(this.currentContact.contactName, 10, this.contactMessages.length);
+
+        // 滚动条往下移动 500px，利于继续往上滚动
+        el.scrollTop = 500;
+      }
+    }
   },
 };
 </script>