FiDA_Front/src/views/home/agent/components/List.vue

<template>
	<div class="agent-list flex flex-col flex-1" ref="listContainer">
		<Item v-for="message in messageList" :key="message.id" :content="message" />
	</div>
</template>

<script setup lang="ts">
	import { ref, nextTick, watch } from 'vue'
	import Item from './Item.vue'

	const props = defineProps<{
    messageList: Array<any>
  }>()

	const listContainer = ref<HTMLDivElement>()

	const scrollToBottom = () => {
		nextTick(() => {
			if (listContainer.value) {
				listContainer.value.scrollTop = listContainer.value.scrollHeight
			}
		})
	}

	watch(() => props.messageList, () => {
		scrollToBottom()
	}, { deep: true })

	defineExpose({ scrollToBottom })
</script>

<style lang="less" scoped>
	.agent-list {
		row-gap: 3.2rem;
    overflow-y: auto;
    // 隐藏滚动条
    &::-webkit-scrollbar {
      display: none;
    }
	}
</style>