fix(ai-chat-message): 修复搜索滚动定位和高亮动画的时序问题

1. 调整注释说明,补充scroll-into-view的微信小程序兼容场景
2. 移除冗余的定时器清除代码,新增延迟350ms触发搜索高亮动画,确保滚动先完成
3. 将原单次定时器改为嵌套定时器结构,正确管理动画状态和定时器资源
This commit is contained in:
2026-05-19 15:53:17 +08:00
parent b1491ad69e
commit 1ee402b581

View File

@@ -11,7 +11,7 @@
@keyword-change="onSearchKeywordChange" @keyword-change="onSearchKeywordChange"
/> />
<!-- 聊天消息列表 - 统一使用 scroll-into-view --> <!-- 聊天消息列表 - scroll-into-view 用于多端滚动定位(兼容微信小程序) -->
<scroll-view <scroll-view
class="chat-messages" class="chat-messages"
scroll-y scroll-y
@@ -529,23 +529,25 @@ export default {
// ==================== 搜索组件事件处理 ==================== // ==================== 搜索组件事件处理 ====================
onSearchScrollTo(messageKey) { onSearchScrollTo(messageKey) {
this.scrollIntoViewId = '' this.scrollIntoViewId = ''
// 清除之前的 flash 定时器
if (this.searchFlashTimer) { if (this.searchFlashTimer) {
clearTimeout(this.searchFlashTimer) clearTimeout(this.searchFlashTimer)
this.searchFlashTimer = null this.searchFlashTimer = null
} }
this.searchFlashAnimatingIndex = -1 this.searchFlashAnimatingIndex = -1
this.$nextTick(() => { this.$nextTick(() => {
this.scrollIntoViewId = messageKey this.scrollIntoViewId = messageKey
// 触发 flash 脉冲动画 - 使用 setTimeout 让动画持续足够时间
// 延迟触发 flash 动画,让 scroll-into-view 滚动先完成
this.searchFlashTimer = setTimeout(() => {
if (this.searchResultFilteredIndex >= 0) { if (this.searchResultFilteredIndex >= 0) {
this.searchFlashAnimatingIndex = this.searchResultFilteredIndex this.searchFlashAnimatingIndex = this.searchResultFilteredIndex
// 动画持续 1.2s 后自动移除 flash 状态
this.searchFlashTimer = setTimeout(() => { this.searchFlashTimer = setTimeout(() => {
this.searchFlashAnimatingIndex = -1 this.searchFlashAnimatingIndex = -1
this.searchFlashTimer = null this.searchFlashTimer = null
}, 1200) }, 1200)
} }
}, 350)
}) })
}, },