修复列表渲染性能bug

pull/1053/head
lyswhut 2022-11-15 12:33:10 +08:00
parent 95a398da23
commit 1e1c0515d1
3 changed files with 20 additions and 14 deletions

View File

@ -20,7 +20,7 @@
</div> </div>
<div v-if="list.length" ref="dom_listContent" :class="$style.content"> <div v-if="list.length" ref="dom_listContent" :class="$style.content">
<base-virtualized-list <base-virtualized-list
v-slot="{ item, index }" :list="list" key-name="key" :item-height="listItemHeight" v-slot="{ item, index }" :list="list" key-name="id" :item-height="listItemHeight"
container-class="scroll" content-class="list" container-class="scroll" content-class="list"
> >
<div <div
@ -29,12 +29,14 @@
@click="handleListItemClick($event, index)" @contextmenu="handleListItemRightClick($event, index)" @click="handleListItemClick($event, index)" @contextmenu="handleListItemRightClick($event, index)"
> >
<div class="list-item-cell no-select" :class="$style.num" style="flex: 0 0 5%;"> <div class="list-item-cell no-select" :class="$style.num" style="flex: 0 0 5%;">
<transition name="play-active">
<div v-if="playTaskId == item.id" :class="$style.playIcon"> <div v-if="playTaskId == item.id" :class="$style.playIcon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="50%" viewBox="0 0 512 512" space="preserve"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="50%" viewBox="0 0 512 512" space="preserve">
<use xlink:href="#icon-play-outline" /> <use xlink:href="#icon-play-outline" />
</svg> </svg>
</div> </div>
<div v-else class="num">{{ index + 1 }}</div> <div v-else class="num">{{ index + 1 }}</div>
</transition>
</div> </div>
<div class="list-item-cell auto name"> <div class="list-item-cell auto name">
<span class="select name" :aria-label="getName(item)">{{ getName(item) }}</span> <span class="select name" :aria-label="getName(item)">{{ getName(item) }}</span>

View File

@ -32,12 +32,14 @@
@click="handleListItemClick($event, index)" @contextmenu="handleListItemRightClick($event, index)" @click="handleListItemClick($event, index)" @contextmenu="handleListItemRightClick($event, index)"
> >
<div class="list-item-cell no-select" :class="$style.num" style="flex: 0 0 5%;"> <div class="list-item-cell no-select" :class="$style.num" style="flex: 0 0 5%;">
<transition name="play-active">
<div v-if="playerInfo.isPlayList && playerInfo.playIndex === index" :class="$style.playIcon"> <div v-if="playerInfo.isPlayList && playerInfo.playIndex === index" :class="$style.playIcon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="50%" viewBox="0 0 512 512" space="preserve"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="50%" viewBox="0 0 512 512" space="preserve">
<use xlink:href="#icon-play-outline" /> <use xlink:href="#icon-play-outline" />
</svg> </svg>
</div> </div>
<div v-else class="num">{{ index + 1 }}</div> <div v-else class="num">{{ index + 1 }}</div>
</transition>
</div> </div>
<div class="list-item-cell auto name" :aria-label="item.name"> <div class="list-item-cell auto name" :aria-label="item.name">
<span class="select name">{{ item.name }}</span> <span class="select name">{{ item.name }}</span>

View File

@ -149,19 +149,21 @@ const variantRxp2 = /\s|'|\.|,||&|"|、|\(|\)|||`|~|-|<|>|\||\/|\]|\[/g
* @returns * @returns
*/ */
export const filterDuplicateMusic = async(list: LX.Music.MusicInfo[], isFilterVariant: boolean = true) => { export const filterDuplicateMusic = async(list: LX.Music.MusicInfo[], isFilterVariant: boolean = true) => {
type ListMapValue = Array<{ index: number, musicInfo: LX.Music.MusicInfo }> type ListMapValue = Array<{ id: string, index: number, musicInfo: LX.Music.MusicInfo }>
const listMap = new Map<string, ListMapValue>() const listMap = new Map<string, ListMapValue>()
const duplicateList = new Set<string>() const duplicateList = new Set<string>()
const handleFilter = (name: string, index: number, musicInfo: LX.Music.MusicInfo) => { const handleFilter = (name: string, index: number, musicInfo: LX.Music.MusicInfo) => {
if (listMap.has(name)) { if (listMap.has(name)) {
const targetMusicInfo = listMap.get(name) const targetMusicInfo = listMap.get(name)
targetMusicInfo!.push({ targetMusicInfo!.push({
id: musicInfo.id,
index, index,
musicInfo, musicInfo,
}) })
duplicateList.add(name) duplicateList.add(name)
} else { } else {
listMap.set(name, [{ listMap.set(name, [{
id: musicInfo.id,
index, index,
musicInfo, musicInfo,
}]) }])