From b1181964f07feaeea5f94e1013a8b3ca28fb50b3 Mon Sep 17 00:00:00 2001
From: Seven <1530011482@qq.com>
Date: Mon, 21 Sep 2026 17:24:59 +0800
Subject: [PATCH] =?UTF-8?q?=E8=81=8A=E5=A4=A9=E6=95=B0=E6=8D=AE=E5=88=86?=
 =?UTF-8?q?=E9=A1=B5=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index/ChatPage.vue | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/pages/index/ChatPage.vue b/src/pages/index/ChatPage.vue
index a8046f0..3504865 100644
--- a/src/pages/index/ChatPage.vue
+++ b/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>