修复列表渲染性能bug
parent
95a398da23
commit
1e1c0515d1
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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,
|
||||||
}])
|
}])
|
||||||
|
|
Loading…
Reference in New Issue