<scroll-view ref="chatScroll" class="chat-area" scroll-y="true" :scroll-top="scrollTop"
scroll-with-animation>
<view v-for="(item, index) in messages" :key="index" class="message-item" :id="item.id"
:class="item.type === 'user' ? 'user-message' : 'ai-message'">
<image v-if="item.type === 'ai'" class="avatar" :src="aiAvatar"></image>
<view class="message-content">
{{ item.content }}
</view>
<image v-if="item.type === 'user'" class="avatar" src="/src/static/images/ai/user.png"></image>
</view>
</scroll-view>
scrollToBottom() {
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this)
query.selectAll('.message-item').boundingClientRect(res => {
if (res && res.length > 0) {
const totalHeight = res.reduce((sum, cur) => sum + cur.height, 0)
this.scrollTop = Number(totalHeight + 999999)
}
}).exec()
})
},