fix(ai-chat-message): 修复搜索滚动定位和高亮动画的时序问题
1. 调整注释说明,补充scroll-into-view的微信小程序兼容场景 2. 移除冗余的定时器清除代码,新增延迟350ms触发搜索高亮动画,确保滚动先完成 3. 将原单次定时器改为嵌套定时器结构,正确管理动画状态和定时器资源
This commit is contained in:
@@ -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 让动画持续足够时间
|
||||
if (this.searchResultFilteredIndex >= 0) {
|
||||
this.searchFlashAnimatingIndex = this.searchResultFilteredIndex
|
||||
// 动画持续 1.2s 后自动移除 flash 状态
|
||||
this.searchFlashTimer = setTimeout(() => {
|
||||
this.searchFlashAnimatingIndex = -1
|
||||
this.searchFlashTimer = null
|
||||
}, 1200)
|
||||
}
|
||||
|
||||
// 延迟触发 flash 动画,让 scroll-into-view 滚动先完成
|
||||
this.searchFlashTimer = setTimeout(() => {
|
||||
if (this.searchResultFilteredIndex >= 0) {
|
||||
this.searchFlashAnimatingIndex = this.searchResultFilteredIndex
|
||||
this.searchFlashTimer = setTimeout(() => {
|
||||
this.searchFlashAnimatingIndex = -1
|
||||
this.searchFlashTimer = null
|
||||
}, 1200)
|
||||
}
|
||||
}, 350)
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user