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