feat: 添加滚动到底部事件处理，优化聊天内容滚动逻辑及样式调整

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;