From 089ba82ec99156e86a925a2a60a517fd932d5d3b Mon Sep 17 00:00:00 2001
From: yangzhe <yangzhe@qq.com>
Date: Fri, 11 Jul 2025 15:21:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E5=88=B0=E5=BA=95=E9=83=A8=E4=BA=8B=E4=BB=B6=E5=A4=84=E7=90=86?=
 =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=E8=81=8A=E5=A4=A9=E5=86=85=E5=AE=B9?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E9=80=BB=E8=BE=91=E5=8F=8A=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/home/index/index.vue | 63 ++++++++++++++++++++++++--------------
 1 file changed, 40 insertions(+), 23 deletions(-)

diff --git a/pages/home/index/index.vue b/pages/home/index/index.vue
index 3b7a445..87a24e9 100644
--- a/pages/home/index/index.vue
+++ b/pages/home/index/index.vue
@@ -84,6 +84,7 @@
         scroll-with-animation
         :scroll-top="scrollTop"
         :show-scrollbar="true"
+        @scrolltolower="onScrollToLower"
       >
         <!-- 头部卡片 -->
         <!-- 后端让先注释 -->
@@ -359,9 +360,7 @@ export default {
     // 确保消息更新后自动滚动到底部
     messageGroups: {
       handler() {
-        this.$nextTick(() => {
-          this.scrollToBottom();
-        });
+        this.scrollToBottom();
       },
       deep: true,
     },
@@ -378,7 +377,6 @@ export default {
     },
   },
   onLoad() {},
-  mounted() {},
   methods: {
     handleLeftClick() {
       this.$u.api.GetConversationPage().then((res) => {
@@ -407,20 +405,31 @@ export default {
     scrollToBottom() {
       // 使用nextTick确保DOM已更新
       this.$nextTick(() => {
-        // 获取滚动区域的高度
-        const query = uni.createSelectorQuery().in(this);
-        query
-          .select(".chat-content")
-          .boundingClientRect((data) => {
-            if (data) {
-              console.log("data", data);
-              // 计算滚动到底部的位置
-              const scrollHeight = data.height;
-              // 设置滚动位置，加100px确保滚动到底部
-              this.scrollTop = scrollHeight + 100;
-            }
-          })
-          .exec();
+        // setTimeout(() => {
+          const query = uni.createSelectorQuery().in(this);
+          query
+            .select(".chat-content")
+            .boundingClientRect((data) => {
+              if (data) {
+                console.log("chat-content高度:", data.height);
+                // 使用pageScrollTo滚动到底部
+                // uni.pageScrollTo({
+                //   scrollTop: 99999,
+                //   duration: 100,
+                // });
+
+                // 同时设置scrollTop和scrollToView
+                this.scrollTop = data.height + 200;
+                // if (this.messageGroups.length > 0) {
+                //   const lastMessage =
+                //     this.messageGroups[this.messageGroups.length - 1];
+                //   this.scrollToView = "msg-" + lastMessage.id;
+                //   console.log("设置scrollToView:", this.scrollToView);
+                // }
+              }
+            })
+            .exec();
+        // }, 300);
       });
     },
     handleFeatureClick(item) {
@@ -554,6 +563,11 @@ export default {
       this.currentConversationId = "";
       this.messageGroups = [];
     },
+
+    // 滚动到底部事件处理
+    onScrollToLower() {
+      console.log("已滚动到底部");
+    },
   },
 };
 </script>
@@ -758,20 +772,23 @@ page {
   .chat-container {
     display: flex;
     flex-direction: column;
-    padding: 30rpx;
+    padding: 0 30rpx;
     box-sizing: border-box;
+    height: calc(100vh - 88rpx - 146rpx);
+    position: relative;
+    overflow: hidden;
 
     .chat-scroll {
       flex: 1;
-      flex-shrink: 0;
-      // overflow-y: auto; /* 使用auto而不是scroll */ // 添加这行会导致滚动条不见
+      height: calc(100vh - 88rpx - 146rpx);
+      overflow-y: scroll;
     }
 
     .chat-card {
       // background-color: #ffffff;
       // border-radius: 16rpx;
-      padding: 30rpx;
-      margin-bottom: 30rpx;
+      padding: 32rpx;
+      margin-bottom: 32rpx;
 
       .chat-card-title {
         font-family: DouyinSans;