刷新自动回到底部

pages/aiChat/ai_index.vue

@@ -162,38 +162,52 @@ export default {
 				return;
 			}
 
-		// 从本地存储获取conversation_id
 			this.conversation_id = uni.getStorageSync('conversation_id') || null;
 
-		// 初始化聊天并确保滚动到底部
+			// 先初始化消息，再滚动到底部
 			this.initChat().then(() => {
-			// 多重延迟确保DOM完全渲染
+				// 使用三重确保策略处理不同设备的渲染差异
+				const scrollWithRetry = (attempt = 0) => {
 					this.$nextTick(() => {
 						setTimeout(() => {
 							this.forceScrollToBottom();
-					// 再次确保滚动（处理某些设备的渲染延迟）
-					setTimeout(() => {
-						this.forceScrollToBottom();
-					}, 500);
-				}, 300);
-			});
-		});
-	},
 
-	/**
+							// 第二次尝试（处理iOS等需要额外触发的设备）
-	 * 页面显示时触发 - 确保每次进入页面都滚动到底部
-	 */
-	onShow() {
-		// 确保页面显示时滚动到底部
-		this.$nextTick(() => {
 							setTimeout(() => {
-				this.forceScrollToBottom();
+								this.forceScrollToBottom(30); // 使用稍小的偏移量
-				// 额外延迟处理某些设备的渲染问题
+
+								// 第三次确保（针对动态内容加载的情况）
+								if (attempt < 2) {
 									setTimeout(() => {
-					this.forceScrollToBottom();
+										const query = uni.createSelectorQuery()
+											.in(this);
+										query.select('.message-list')
+											.boundingClientRect(rect => {
+												if (rect && Math.abs(rect
+														.scrollHeight -
+														rect.height - this
+														.scrollTop) > 50) {
+													scrollWithRetry(
+														attempt + 1
+													); // 递归调用直到成功
+												}
+											}).exec();
+									}, attempt === 0 ? 500 : 800);
+								}
 							}, 200);
 						}, 100);
 					});
+				};
+
+				// 初始触发
+				scrollWithRetry();
+			}).catch(e => {
+				console.error('初始化失败:', e);
+				// 失败时仍尝试滚动
+				this.$nextTick(() => {
+					setTimeout(() => this.forceScrollToBottom(), 300);
+				});
+			});
 		},
 
 		/* ---------- 方法 ---------- */
@@ -208,15 +222,16 @@ export default {
 			},
 
 			/**
-		 * 强制滚动到底部 - 优化版本
+			 * 强制滚动到底部
+			 * @param {number} offset - 额外的偏移量，默认为50
 			 */
-		forceScrollToBottom() {
+			forceScrollToBottom(offset = 50) {
 				this.$nextTick(() => {
+					try {
 						const query = uni.createSelectorQuery().in(this);
 						query.select('.message-list').boundingClientRect(rect => {
-					if (rect && rect.scrollHeight > rect.height) {
+							if (rect) {
-						// 计算需要滚动的距离
+								const targetScrollTop = rect.scrollHeight - rect.height - offset;
-						const targetScrollTop = rect.scrollHeight - rect.height + 50; // 额外50px确保完全显示
 								this.scrollTop = targetScrollTop;
 
 								// 双重确保滚动生效
@@ -228,23 +243,25 @@ export default {
 								}, 100);
 							}
 						}).exec();
+					} catch (error) {
+						console.error('滚动到底部失败:', error);
+					}
 				});
 			},
 
-		forceScrollToTop() {
+			// forceScrollToTop() {
-			this.$nextTick(() => {
+			// 	this.$nextTick(() => {
-				// 直接滚动到顶部
+			// 		this.scrollTop = 0;
-				this.scrollTop = 999;
 
-				// 双重确保滚动生效
+			// 		// 双重确保滚动生效
-				setTimeout(() => {
+			// 		setTimeout(() => {
-					this.scrollTop = 1;
+			// 			this.scrollTop = 1;
-					setTimeout(() => {
+			// 			setTimeout(() => {
-						this.scrollTop = 0;
+			// 				this.scrollTop = 0;
-					}, 50);
+			// 			}, 50);
-				}, 100);
+			// 		}, 100);
-			});
+			// 	});
-		},
+			// },
 
 			/**
 			 * 切换历史记录抽屉显示状态