优化列表滚动性能

pull/733/head
lyswhut 2021-12-23 10:37:39 +08:00
parent e337f7121b
commit 217ff27e72
5 changed files with 13 additions and 9 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<component :is="containerEl" :class="containerClass" ref="dom_scrollContainer" style="height: 100%; overflow: auto; position: relative; display: block;"> <component :is="containerEl" :class="containerClass" ref="dom_scrollContainer" style="height: 100%; overflow: auto; position: relative; display: block; contain: strict;">
<component :is="contentEl" :class="contentClass" :style="contentStyle"> <component :is="contentEl" :class="contentClass" :style="contentStyle">
<div v-for="item in views" :key="item.key" :style="item.style"> <div v-for="item in views" :key="item.key" :style="item.style">
<slot name="default" v-bind="{ item: item.item, index: item.index }" /> <slot name="default" v-bind="{ item: item.item, index: item.index }" />

View File

@ -155,6 +155,7 @@ export default {
border-top: 2px solid @color-theme; border-top: 2px solid @color-theme;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
contain: strict;
z-index: 2; z-index: 2;
* { * {
box-sizing: border-box; box-sizing: border-box;

View File

@ -28,9 +28,10 @@ transition(enter-active-class="animated lightSpeedIn" leave-active-class="animat
p(v-if="musicInfo.album") {{$t('player__music_album')}}{{musicInfo.album}} p(v-if="musicInfo.album") {{$t('player__music_album')}}{{musicInfo.album}}
transition(enter-active-class="animated fadeIn" leave-active-class="animated fadeOut") transition(enter-active-class="animated fadeIn" leave-active-class="animated fadeOut")
LyricPlayer(v-if="visibleLrc") LyricPlayer(v-if="visibled")
music-comment(:class="$style.comment" :musicInfo="musicInfoItem" :show="isShowPlayComment" @close="hideComment") music-comment(:class="$style.comment" :musicInfo="musicInfoItem" :show="isShowPlayComment" @close="hideComment" v-if="visibled")
play-bar transition(enter-active-class="animated fadeIn" leave-active-class="animated fadeOut")
play-bar(v-if="visibled")
</template> </template>
@ -59,7 +60,7 @@ export default {
}, },
setup() { setup() {
const setting = useRefGetter('setting') const setting = useRefGetter('setting')
const visibleLrc = ref(false) const visibled = ref(false)
let clickTime = 0 let clickTime = 0
@ -80,13 +81,13 @@ export default {
} }
const handleAfterEnter = () => { const handleAfterEnter = () => {
visibleLrc.value = true visibled.value = true
} }
const handleAfterLeave = () => { const handleAfterLeave = () => {
setShowPlayLrcSelectContentLrc(false) setShowPlayLrcSelectContentLrc(false)
hideComment(false) hideComment(false)
visibleLrc.value = false visibled.value = false
} }
return { return {
@ -100,7 +101,7 @@ export default {
hideComment, hideComment,
handleAfterEnter, handleAfterEnter,
handleAfterLeave, handleAfterLeave,
visibleLrc, visibled,
min() { min() {
window.eventHub.emit(eventBaseName.min) window.eventHub.emit(eventBaseName.min)
}, },
@ -137,6 +138,7 @@ export default {
color: @color-theme_2-font; color: @color-theme_2-font;
border-left: 12px solid @color-theme; border-left: 12px solid @color-theme;
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
contain: strict;
box-sizing: border-box; box-sizing: border-box;

View File

@ -204,7 +204,7 @@ export default ({ setting }) => {
const setStopStatus = () => { const setStopStatus = () => {
setPlay(false) setPlay(false)
setTitle() setTitle()
setStatus('^-^') setStatus('')
setStatusText('') setStatusText('')
setMusicInfo({ setMusicInfo({
songmid: null, songmid: null,

View File

@ -281,6 +281,7 @@ export default {
font-size: 14px; font-size: 14px;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
flex: auto;
&.copying { &.copying {
.no-select { .no-select {
display: none; display: none;