聊天室滚动修正
This commit is contained in:
@@ -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)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
|
||||
// 处理工单操作
|
||||
|
||||
Reference in New Issue
Block a user