uniapp聊天消息流式输出滚动到底部

<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()
    })
},
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容