前端面试宝典---项目难点2-智能问答对话框采用虚拟列表动态渲染可视区域元素（10万+条数据）

引言

在我参与智能问答项目中一个智能体回话并不会像豆包一样，每次新建会话都是是从头开始，而项目中你想创建新会话就像chatbox一样，是点击橡皮擦开启新的聊天上下文，但是直接的聊天记录依然存在，针对超过十万＋条对话数据进行展示。会出现页面卡死的问题。
所以我们可以通过虚拟列表的形式展示我们的对话内容

<template><div class="container"><!-- 展示问答内容 --><div class="chat-container" ref="chatContainer" @scroll="handleScroll"><!-- 优化后 --><divclass="virtual-placeholder":style="{ height: `${chatListHeight}px` }"></div><divclass="truth-box":style="{ transform: `translateY(${scrollTop}px)` }"><divclass="chat-item-container":style="{ transform: `translateY(${scrollTopItem}px)` }"><divv-for="(item, index) in renderedItems":key="index"class="chat-item":style="{ height: `${item.height}px` }"><div v-if="item.isUser" class="user-message">{{ item.content }}</div><div v-else class="system-message">{{ item.content }}</div></div></div></div><!-- ------------------------------------------- --><!-- 优化前 --><!-- <divv-for="(item, index) in chatList":key="index"class="chat-item":style="{ height: `${item.height}px` }"><div v-if="item.isUser" class="user-message">{{ item.content }}</div><div v-else class="system-message">{{ item.content }}</div></div> --></div><!-- 输入框与发送按钮 --><el-row type="flex" justify="center"><el-col :span="18"><el-input v-model="inputValue" placeholder="请输入内容"></el-input></el-col><el-col :span="6"><el-button type="primary" @click="send">发送</el-button></el-col></el-row></div>
</template><script>
export default {data() {return {inputValue: '',chatList: [],startIndex: 0,visibleCount: 20, // 可视区域内显示的条目数itemHeight: 100, // 假设每个条目平均高度为 100pxscrollTop: 0,}},computed: {chatListLength() {return this.chatList.length},chatListHeight() {return ((this.chatList.reduce((acc, item) => acc + item.height, 0) *this.chatListLength) /this.chatListLength)},renderedItems() {console.log('renderedItems', this.startIndex)return this.chatList.slice(this.startIndex,this.startIndex + this.visibleCount)},startOffset() {return this.chatList.slice(0, this.startIndex).reduce((acc, item) => acc + item.height, 0)},scrollTopItem() {return this.startOffset - this.scrollTop},},mounted() {this.chatList = new Array(100000).fill(0).map(() => {return {isUser: Math.random() > 0.5,content: '欢迎来到我们的帮助中心！',height: Math.random() * 100 + 50,}})},methods: {send() {if (this.inputValue.trim() !== '') {// 添加用户的输入到聊天列表this.chatList.push({isUser: true,content: this.inputValue,height: Math.random() * 100 + 50,})// 模拟系统回复setTimeout(() => {this.chatList.push({isUser: false,content: '你可以通过点击设置选项来修改账户信息。',height: Math.random() * 100 + 50,})}, 500)// 清空输入框this.inputValue = ''// 自动滚动到底部this.scrollToBottom()}},handleScroll() {const scrollTop = this.$refs.chatContainer.scrollTopthis.scrollTop = scrollToplet currentStartIndex = 0let totalHeiight = 0for (let i = 0; i < this.chatList.length; i++) {const item = this.chatList[i]totalHeiight += item.heightif (totalHeiight >= scrollTop) {currentStartIndex = ibreak}}this.startIndex = currentStartIndex >= 0 ? currentStartIndex : 0},scrollToBottom() {this.$nextTick(() => {const container = this.$refs.chatContainer// 正确设置滚动到底部container.scrollTop = container.scrollHeight})},},
}
</script>
<style lang="scss" scoped>
.container {display: flex;flex-direction: column;height: 100%;
}
.chat-container {flex: 1;height: 0;overflow-y: auto;position: relative;.truth-box {width: 100%;position: absolute;top: 0;left: 0;overflow: hidden;height: 100%;}
}
.chat-item-container {position: absolute;top: 0;left: 0;width: 100%;
}
.chat-item {
}.user-message {text-align: right;color: #409eff; // Element UI 蓝色background: pink;height: 100%;
}.system-message {height: 100%;text-align: left;color: #67c23a; // Element UI 绿色background: gray;
}
</style>