scout666/chat-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf(消息列表): 使用虚拟列表优化聊天会话列表渲染性能

Browse Source 
将普通列表替换为虚拟列表(n-virtual-list)，减少DOM节点数量以提升长列表的渲染性能
This commit is contained in:
Phoenix 2025-07-01 12:00:16 +08:00
parent b956b4ef79
commit 1094b3851f
1 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/message/inner/IndexSider.vue
View File

@ -1146,8 +1146,10 @@ const handleEnterSearchResultChat = () => {
<main id="talk-session-list" class="el-main me-scrollbar me-scrollbar-thumb"> <main id="talk-session-list" class="el-main me-scrollbar me-scrollbar-thumb">
<template v-if="loadStatus == 2"><Skeleton /></template> <template v-if="loadStatus == 2"><Skeleton /></template>
<template v-else> <template v-else>
<TalkItem <n-virtual-list :item-size="64" :items="items">
v-for="item in items" <template #default="{ item }">
<TalkItem
:key="item.index_name + item.unread_num" :key="item.index_name + item.unread_num"
:data="item" :data="item"
:avatar="item.avatar" :avatar="item.avatar"
@ -1157,6 +1159,8 @@ const handleEnterSearchResultChat = () => {
@top-talk="onToTopTalk" @top-talk="onToTopTalk"
@contextmenu.prevent="onContextMenuTalk($event, item)" @contextmenu.prevent="onContextMenuTalk($event, item)"
/> />
</template>
</n-virtual-list>
</template> </template>
</main> </main>
</section> </section>