聊天室滚动修正

This commit is contained in:
2025-12-30 11:07:27 +08:00
parent 2c32072fa9
commit 8011dec826
2 changed files with 44 additions and 7 deletions

View File

@@ -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)
}
})
}

View File

@@ -43,6 +43,7 @@
</view>
<!-- 聊天消息区域 -->
<scroll-view class="chat-area" scroll-y="true" :scroll-top="scrollTop"
:scroll-with-animation="false"
:style="{ top: (headerPaddingTop + 88) + 'px' }"
@scrolltoupper="loadMoreMessages"
upper-threshold="50">
@@ -380,9 +381,14 @@ async function loadMessages() {
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)
}
// 处理工单操作