优化消息滚动逻辑

This commit is contained in:
jxxghp
2025-06-15 08:05:05 +08:00
parent 9c386f8533
commit a55269e9e6
2 changed files with 27 additions and 7 deletions
+24 -4
View File
@@ -113,9 +113,29 @@ async function openMessageDialog() {
}, 500) }, 500)
} }
// 滚动到底部 // 智能滚动到底部(只有用户在底部附近时才滚动)
function scrollMessageToEnd() { function scrollMessageToEnd() {
// 使用更长的延迟确保DOM已更新 // 使用更长的延迟确保DOM已更新
setTimeout(() => {
try {
const cardText = document.querySelector('.v-dialog .v-card-text')
if (cardText) {
const { scrollTop, scrollHeight, clientHeight } = cardText
// 计算距离底部的距离
const distanceFromBottom = scrollHeight - scrollTop - clientHeight
// 如果用户距离底部小于100px,认为用户在底部附近,执行自动滚动
if (distanceFromBottom <= 100) {
cardText.scrollTop = cardText.scrollHeight
}
}
} catch (error) {
console.error(error)
}
}, 500) // 增加延迟时间
}
// 强制滚动到底部(用于发送消息后)
function forceScrollToEnd() {
setTimeout(() => { setTimeout(() => {
try { try {
const cardText = document.querySelector('.v-dialog .v-card-text') const cardText = document.querySelector('.v-dialog .v-card-text')
@@ -125,7 +145,7 @@ function scrollMessageToEnd() {
} catch (error) { } catch (error) {
console.error(error) console.error(error)
} }
}, 500) // 增加延迟时间 }, 500)
} }
// 拼接全部日志url // 拼接全部日志url
@@ -141,7 +161,7 @@ async function sendMessage() {
await api.post(`message/web?text=${user_message.value}`) await api.post(`message/web?text=${user_message.value}`)
user_message.value = '' user_message.value = ''
sendButtonDisabled.value = false sendButtonDisabled.value = false
scrollMessageToEnd() forceScrollToEnd() // 发送消息后强制滚动到底部
} catch (error) { } catch (error) {
console.error(error) console.error(error)
} }
@@ -159,7 +179,7 @@ defineExpose({
}) })
onMounted(() => { onMounted(() => {
scrollMessageToEnd() forceScrollToEnd() // 初始化时强制滚动到底部
const shortcut = getQueryValue('shortcut') const shortcut = getQueryValue('shortcut')
if (shortcut) { if (shortcut) {
const found = shortcuts.find(item => item.dialog === shortcut) const found = shortcuts.find(item => item.dialog === shortcut)
+3 -3
View File
@@ -40,7 +40,7 @@ function startSSEMessager() {
if (compareTime(object.date, lastTime.value) <= 0) return if (compareTime(object.date, lastTime.value) <= 0) return
messages.value.push(object) messages.value.push(object)
nextTick(() => { nextTick(() => {
emit('scroll') emit('scroll') // 新消息到达时触发智能滚动
}) })
} }
}) })
@@ -70,7 +70,7 @@ async function loadMessages({ done }: { done: any }) {
// 合并数据 // 合并数据
messages.value = [...currData.value, ...messages.value] messages.value = [...currData.value, ...messages.value]
if (page.value === 1) { if (page.value === 1) {
// 滚动到底部 // 首次加载时滚动到底部
emit('scroll') emit('scroll')
} }
// 页码+1 // 页码+1
@@ -97,7 +97,7 @@ function compareTime(time1: string, time2: string) {
return new Date(time1.replaceAll(/-/g, '/')).getTime() - new Date(time2.replaceAll(/-/g, '/')).getTime() return new Date(time1.replaceAll(/-/g, '/')).getTime() - new Date(time2.replaceAll(/-/g, '/')).getTime()
} }
// 图片加载完成 // 图片加载完成时触发智能滚动
function handleImageLoad() { function handleImageLoad() {
emit('scroll') emit('scroll')
} }