Browse Source

修改bug

Ayer 6 months ago
parent
commit
12f8447757
2 changed files with 50 additions and 44 deletions
  1. 14 2
      src/subpackages/my/chatHistory/index.scss
  2. 36 42
      src/subpackages/my/chatHistory/index.vue

+ 14 - 2
src/subpackages/my/chatHistory/index.scss

@@ -3,17 +3,25 @@
 	padding-top: 150rpx;
 	// transform: scaleY(-1) ;
 	// padding-bottom: 100rpx;
+	overflow: auto;
+	scrollbar-width: none; /* Firefox */
+	-ms-overflow-style: none; /* IE and Edge */
 	// 聊天记录内容样式
 	.chat-content{
-		transform: scaleY(-1) ;
+		transform: rotate(180deg);
 		height: 100vh;
 		box-sizing: border-box;
 		// padding-top: 200rpx;
 		// padding-bottom: 100rpx;
+		overflow: auto;
+		scrollbar-width: none; /* Firefox */
+		-ms-overflow-style: none; /* IE and Edge */
 	}
+
+	
 	.chat-list {
 		
-		transform: scaleY(-1) ;
+		
 		box-sizing: border-box;
 		// margin-top: 40rpx;
 		// margin-bottom: 300rpx;
@@ -25,6 +33,10 @@
 		// height: calc(100vh - 200px); /* 根据需要调整高度 */
 		overflow-y: scroll; /* 使聊天内容可滚动 */
 		gap: 30rpx;
+		.chat-item{
+			transform: rotate(180deg);
+			// transform: rotate(180deg)
+		}
 		.time {
 			margin-top: 40rpx;
 			text-align: center;

+ 36 - 42
src/subpackages/my/chatHistory/index.vue

@@ -12,22 +12,20 @@
 		<scroll-view
 			scroll-y
 			class="chat-content"
+			:scrollTop="scrollTop"
 			@scroll="viewScroll"
 			id="chatListContainer"
 			v-show="isShowChatList"
 			@scrolltolower="handleScroll"
-			:scrollTop="scrollTop"
 		>
 			<!-- 替换为实际条件 -->
 			<!-- 聊天记录列表 -->
-			<view class="chat-list pd-32" :style="{ 'padding-bottom': '300rpx' }">
-				<CustomLoadMore :status="loadStatus" />
+			<view class="chat-list pd-32" :style="{ 'padding-top': '300rpx' }">
 				<!-- 时间显示 -->
-				<template v-for="(item, index) in chatList" :key="index">
-					<view class="time">
+				<view v-for="(item, index) in chatList" :key="index" class="chat-item">
+					<view class="time" v-if="index % 5 == 0 && item.role=='user'" >
 						<text
-							>{{ formatTimestamp(item.created) }}------{{ index + 1 }}</text
-						>
+							>{{ formatTimestamp(item.created) }}</text>
 					</view>
 					<!-- 本人(助手)消息 -->
 					<view class="user" v-if="item.role === 'assistant'">
@@ -77,7 +75,11 @@
 							</view>
 						</view>
 					</view>
-				</template>
+				</view>
+				<CustomLoadMore
+					:status="loadStatus"
+					style="transform: rotate(180deg)"
+				/>
 			</view>
 			<view
 				v-if="chatList.length == 0"
@@ -155,6 +157,7 @@ const scrollTop = ref(0);
 // 聊天记录
 const chatList = ref<any>([]);
 const isScroll = ref(true);
+const scrollView = ref("");
 /**
  * 打开调优弹窗
  */
@@ -215,8 +218,8 @@ const getData = async () => {
 	const {
 		data: { records, total },
 	} = await aichat.msgList(paramsData.value);
-	records.reverse();
-	chatList.value.unshift(...records);
+	// records.reverse();
+	chatList.value.push(...records);
 	pageTotal.value = total;
 	console.log(chatList.value);
 
@@ -245,46 +248,23 @@ let isThrottling = false;
 let currentScroll = 0;
 // 处理滚动事件
 const handleScroll = (event: any) => {
-	if (isThrottling) return; // 如果正在节流,则退出
-	isScroll.value = false;
-	// 设置节流状态为 true
-	isThrottling = true;
-
-	// 处理滚动事件逻辑
-	// console.log("滚动了", event);
 	loadStatus.value = "loading";
-	++paramsData.value.pageNum;
-	// nextTick(() => {
-
-	// })
-	console.log("当前", scrollTop.value, currentScroll);
-
 	setTimeout(() => {
+		goTop();
 		getData();
-		if (chatList.value.length < pageTotal.value) {
-			loadStatus.value = "loadmore";
-		} else {
-			loadStatus.value = "nomore";
-		}
 	}, 500);
-	// 在 1000ms 后取消节流状态
-	setTimeout(() => {
-		isThrottling = false;
-		
-		scrollTop.value = currentScroll;
-	}, 1000);
 };
-
+const goTop = () => {
+	// 解决view层不同步的问题
+	scrollTop.value = currentScroll;
+	nextTick(() => {
+		// scrollTop.value = 0;
+	});
+};
 const isScrollTop = ref(false);
 
 const viewScroll = (event: any) => {
-	// console.log("当前高度", event.detail.scrollTop);
-	if(!isThrottling) {
-		currentScroll = event.detail.scrollTop
-	}
-	// if(isThrottling) {
-	// 	currentScroll =1670
-	// 	console.log("设置完", event.detail.scrollTop,currentScroll);}
+		currentScroll = event.detail.scrollTop;
 };
 /**
  * 处理返回按钮事件
@@ -305,4 +285,18 @@ onLoad((option) => {
 page {
 	background-color: #f5f7fa;
 }
+	.chat-content div::-webkit-scrollbar{
+		display: none;
+			width: 0;
+			height: 0;
+			-webkit-appearance: none;
+			background: transparent;
+			color: transparent;
+		
+	}
+	
+	.chat-content div{
+	  -ms-overflow-style: none; /* IE 10+ */
+	  scrollbar-width: none; /* Firefox */
+	}
 </style>