diff --git a/urbanLifelineWeb/packages/workcase/src/views/public/ChatRoom/chatRoom/ChatRoom.vue b/urbanLifelineWeb/packages/workcase/src/views/public/ChatRoom/chatRoom/ChatRoom.vue index cbe533f2..137e654c 100644 --- a/urbanLifelineWeb/packages/workcase/src/views/public/ChatRoom/chatRoom/ChatRoom.vue +++ b/urbanLifelineWeb/packages/workcase/src/views/public/ChatRoom/chatRoom/ChatRoom.vue @@ -281,7 +281,31 @@ const handleFileSelect = (e: Event) => { const scrollToBottom = () => { nextTick(() => { if (messagesRef.value) { - messagesRef.value.scrollTop = messagesRef.value.scrollHeight + // 使用 smooth 滚动到底部 + messagesRef.value.scrollTo({ + top: messagesRef.value.scrollHeight, + behavior: 'instant' + }) + + // 延迟再次确保滚动到底部(处理内容动态渲染的情况) + setTimeout(() => { + if (messagesRef.value) { + messagesRef.value.scrollTo({ + top: messagesRef.value.scrollHeight, + behavior: 'instant' + }) + } + }, 100) + + // 最后一次确保(处理图片等异步内容加载) + setTimeout(() => { + if (messagesRef.value) { + messagesRef.value.scrollTo({ + top: messagesRef.value.scrollHeight, + behavior: 'instant' + }) + } + }, 300) } }) } diff --git a/urbanLifelineWeb/packages/workcase_wechat/pages/chatRoom/chatRoom/chatRoom.uvue b/urbanLifelineWeb/packages/workcase_wechat/pages/chatRoom/chatRoom/chatRoom.uvue index 6c163db5..f872ed28 100644 --- a/urbanLifelineWeb/packages/workcase_wechat/pages/chatRoom/chatRoom/chatRoom.uvue +++ b/urbanLifelineWeb/packages/workcase_wechat/pages/chatRoom/chatRoom/chatRoom.uvue @@ -42,7 +42,8 @@ - @@ -374,15 +375,20 @@ async function loadMessages() { const actualTotalPages = pageInfo?.totalPages || 1 hasMore.value = actualTotalPages > currentPage.value console.log('[loadMessages] pageInfo:', pageInfo, 'actualTotalPages:', actualTotalPages, 'hasMore:', hasMore.value) - + // 后端降序返回,需要反转后显示(早的在上,新的在下) const reversedList = [...msgRes.dataList].reverse() messages.splice(0, messages.length, ...reversedList) console.log('[loadMessages] 加载完成, 消息数:', messages.length) - - // 加载完第一页后检查是否需要自动填充 + + // 加载完第一页后滚动到底部,需要等待 DOM 完全渲染 if (currentPage.value === 1) { - nextTick(() => scrollToBottom()) + // 使用 setTimeout 确保 DOM 完全渲染后再滚动 + nextTick(() => { + setTimeout(() => { + scrollToBottom() + }, 300) + }) } else { nextTick(() => scrollToBottom()) } @@ -552,7 +558,14 @@ async function sendMessage() { // 滚动到底部 function scrollToBottom() { - scrollTop.value = 999999 + // uni-app 的 scroll-view 需要 scroll-top 值发生变化才会触发滚动 + // 先重置为 0 + scrollTop.value = 0 + // 使用 setTimeout 确保重置生效 + setTimeout(() => { + // 使用一个足够大的值确保滚动到底部 + scrollTop.value = 999999 + }, 50) } // 处理工单操作