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