Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-13 09:28:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

🎨 虚拟列表性能优化

Browse Source
This commit is contained in:
目棃
2024-10-11 16:31:53 +08:00
parent 6b34ae612c
commit 454f9e9750
4 changed files with 24 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/userAchi/tua-achi-list.vue
View File

@@ -3,10 +3,12 @@
<div v-if="ncData !== undefined"> <div v-if="ncData !== undefined">
<TopNameCard :data="ncData" @selected="showNc = true" /> <TopNameCard :data="ncData" @selected="showNc = true" />
</div> </div>
<!-- todo 虚拟列表优化 --> <v-virtual-scroll :items="renderAchi" :item-height="60" class="tua-al-list">
<div v-for="(item, index) in renderAchi" :key="index"> <template #default="{ item }">
<TuaAchi :modelValue="item" @select-achi="selectAchi" /> <TuaAchi :modelValue="item" @select-achi="selectAchi" />
</div> <div style="height: 10px" />
</template>
</v-virtual-scroll>
<ToNameCard v-model="showNc" :data="ncData" v-if="ncData" /> <ToNameCard v-model="showNc" :data="ncData" v-if="ncData" />
<ToAchiInfo <ToAchiInfo
v-if="selectedAchi" v-if="selectedAchi"
@@ -144,11 +146,14 @@ function switchAchiInfo(next: boolean): void {
width: 100%; width: 100%;
height: 100%; height: 100%;
flex-direction: column; flex-direction: column;
padding-right: 10px; overflow-y: auto;
overflow-y: scroll;
row-gap: 10px; row-gap: 10px;
} }
.tua-al-list {
padding-right: 10px;
}
.card-arrow { .card-arrow {
position: relative; position: relative;
display: flex; display: flex;

1
src/components/userAchi/tua-achi.vue
View File

@@ -115,6 +115,7 @@ async function setAchiStat(stat: boolean): Promise<void> {
.achi-container { .achi-container {
position: relative; position: relative;
display: flex; display: flex;
height: 60px;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 10px; padding: 10px;

2
src/pages/WIKI/Namecard.vue
View File

@@ -4,7 +4,7 @@
v-model="search" v-model="search"
prepend-inner-icon="mdi-magnify" prepend-inner-icon="mdi-magnify"
label="搜索" label="搜索"
hide-details :hide-details="true"
variant="outlined" variant="outlined"
@click:prepend-inner="searchNamecard" @click:prepend-inner="searchNamecard"
@keyup.enter="searchNamecard" @keyup.enter="searchNamecard"

24
src/pages/common/Achievements.vue
View File

@@ -31,16 +31,17 @@
</template> </template>
</v-app-bar> </v-app-bar>
<div class="wrap"> <div class="wrap">
<div class="left-wrap"> <v-virtual-scroll class="left-wrap" :items="seriesList" item-height="60">
<TuaSeries <template #default="{ item }">
v-for="(series, index) in seriesList" <TuaSeries
:key="index" @click="selectSeries(item)"
@click="selectSeries(series)" v-model:cur="selectedSeries"
v-model:cur="selectedSeries" :uid="uidCur"
:uid="uidCur" :series="item"
:series="series" />
/> <div style="height: 10px" />
</div> </template>
</v-virtual-scroll>
<TuaAchiList <TuaAchiList
:uid="uidCur" :uid="uidCur"
:hideFin="hideFin" :hideFin="hideFin"
@@ -352,12 +353,9 @@ async function deleteUid(): Promise<void> {
} }
.left-wrap { .left-wrap {
display: flex;
width: 400px; width: 400px;
height: 100%; height: 100%;
flex-direction: column;
padding-right: 10px; padding-right: 10px;
overflow-y: auto; overflow-y: auto;
row-gap: 10px;
} }
</style> </style>