girineko/YesPlayMusic
1
0
Fork 0
mirror of https://github.com/GiriNeko/YesPlayMusic.git synced 2025-12-17 21:58:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: virtual scrollbar

Browse source
This commit is contained in:
qier222 2021-06-05 14:16:53 +08:00
parent 226a2145c4
commit 7c79afd0d1
No known key found for this signature in database
GPG key ID: 9C85007ED905F14D
13 changed files with 341 additions and 133 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/App.vue
View file

@ -1,7 +1,8 @@
<template>
<div id="app">
<div id="app" :class="{ 'user-select-none': userSelectNone }">
<Scrollbar v-show="!showLyrics" ref="scrollbar" />
<Navbar v-show="showNavbar" ref="navbar" />
<main>
<main ref="main" @scroll="handleScroll">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
@ -22,6 +23,7 @@
<script>
import ModalAddTrackToPlaylist from './components/ModalAddTrackToPlaylist.vue';
import ModalNewPlaylist from './components/ModalNewPlaylist.vue';
import Scrollbar from './components/Scrollbar.vue';
import Navbar from './components/Navbar.vue';
import Player from './components/Player.vue';
import Toast from './components/Toast.vue';
@ -39,10 +41,12 @@ export default {
ModalAddTrackToPlaylist,
ModalNewPlaylist,
Lyrics,
Scrollbar,
},
data() {
return {
isElectron: process.env.IS_ELECTRON, // true || undefined
userSelectNone: false,
};
},
computed: {
@ -93,6 +97,9 @@ export default {
this.$store.dispatch('fetchLikedMVs');
}
},
handleScroll() {
this.$refs.scrollbar.handleScroll();
},
},
};
</script>
@ -104,20 +111,18 @@ export default {
}
main {
margin-top: 84px;
margin-bottom: 96px;
padding: {
right: 10vw;
left: 10vw;
}
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
overflow: auto;
padding: 64px 10vw 96px 10vw;
box-sizing: border-box;
}
@media (max-width: 1336px) {
main {
padding: 0 5vw;
}
}
padding: 64px 5vw 96px 5vw;
}
}