github
/
lx-music-desktop
mirror of https://github.com/lyswhut/lx-music-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

优化歌单列表动画

pull/96/head
lyswhut 2019-09-04 09:10:06 +08:00
parent 9564097f46
commit 0aeab00289
3 changed files with 28 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
publish/changeLog.md
View File

@ -0,0 +1,7 @@
### 优化
- 优化歌单列表动画
### 修复
- 修复歌单无法翻页的问题

2
src/renderer/components/material/SongList.vue
View File

@ -175,6 +175,7 @@ export default {
height: 100%; height: 100%;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
background-color: @color-theme_2;
} }
.list { .list {
@ -186,7 +187,6 @@ export default {
} }
.thead { .thead {
flex: none; flex: none;
background-color: @color-theme_2;
} }
.tbody { .tbody {
flex: auto; flex: auto;

19
src/renderer/views/SongList.vue
View File

@ -1,12 +1,12 @@
<template lang="pug"> <template lang="pug">
div(:class="$style.leaderboard") div(:class="$style.container")
div(:class="$style.header") div(:class="$style.header")
material-tag-list(:class="$style.tagList" :list="tagList" v-model="tagInfo") material-tag-list(:class="$style.tagList" :list="tagList" v-model="tagInfo")
material-tab(:class="$style.tab" :list="sorts" item-key="id" item-name="name" v-model="sortId") material-tab(:class="$style.tab" :list="sorts" item-key="id" item-name="name" v-model="sortId")
material-select(:class="$style.select" :list="sourceInfo.sources" item-key="id" item-name="name" v-model="source") material-select(:class="$style.select" :list="sourceInfo.sources" item-key="id" item-name="name" v-model="source")
div(:class="$style.container") div(:class="$style.main")
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut") transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
div(:class="$style.materialSongList" v-show="isVisibleListDetail") div(:class="$style.songListDetail" v-show="isVisibleListDetail")
div(:class="$style.songListHeader") div(:class="$style.songListHeader")
div(:class="$style.songListHeaderLeft") div(:class="$style.songListHeaderLeft")
img(:src="selectListInfo.img") img(:src="selectListInfo.img")
@ -17,7 +17,8 @@
div(:class="$style.songListHeaderRight") div(:class="$style.songListHeaderRight")
material-btn(:class="$style.closeDetailButton" @click="hideListDetail") 返回 material-btn(:class="$style.closeDetailButton" @click="hideListDetail") 返回
material-song-list(v-model="selectdData" @action="handleSongListAction" :source="source" :page="listDetail.page" :limit="listDetail.limit" :total="listDetail.total" :list="listDetail.list") material-song-list(v-model="selectdData" @action="handleSongListAction" :source="source" :page="listDetail.page" :limit="listDetail.limit" :total="listDetail.total" :list="listDetail.list")
div.scroll(:class="$style.content" ref="dom_scrollContent" v-show="!isVisibleListDetail") transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
div.scroll(:class="$style.songList" ref="dom_scrollContent" v-show="!isVisibleListDetail")
ul ul
li(:class="$style.item" v-for="(item, index) in listData.list" @click="handleItemClick(index)") li(:class="$style.item" v-for="(item, index) in listData.list" @click="handleItemClick(index)")
div(:class="$style.left") div(:class="$style.left")
@ -248,7 +249,7 @@ export default {
<style lang="less" module> <style lang="less" module>
@import '../assets/styles/layout.less'; @import '../assets/styles/layout.less';
.leaderboard { .container {
height: 100%; height: 100%;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
@ -268,7 +269,7 @@ export default {
width: 80px; width: 80px;
} }
.container { .main {
flex: auto; flex: auto;
overflow: hidden; overflow: hidden;
// position: relative; // position: relative;
@ -303,7 +304,7 @@ export default {
} }
} }
.song_list_header_middle { .song-list-header-middle {
flex: auto; flex: auto;
padding: 5px 7px; padding: 5px 7px;
h3 { h3 {
@ -325,7 +326,7 @@ export default {
padding-right: 15px; padding-right: 15px;
} }
.material-song-list { .song-list-detail {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -335,7 +336,7 @@ export default {
flex-flow: column nowrap; flex-flow: column nowrap;
} }
.content { .songList {
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
padding: 0 15px; padding: 0 15px;