优化列表滚动性能
parent
e337f7121b
commit
217ff27e72
|
@ -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 }" />
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue