从上一篇,获取得到歌手信息之后,通过vuex 来获取数据,拿到数据后,创建歌曲列表组件 music-list.vue
页面dom结构,分为头部(返回按钮,歌手姓名), 歌手图片 ,歌曲列表。
header头部有做一个遮罩层的处理,通过css3的颜色渐变,使头部标题不会与头部背景图颜色重叠
其中 歌手 图片由歌手列表传入,由于图片尺寸太小,在这我使用正则表达式对图片请求的url进行修改,拿到大一号的背景图,
songlist.vue 是歌曲列表组件,本应用所有页面组件统一使用的歌曲列表组件。在这只是简单的显示歌曲信息,后续将为其添加点击事件,修改vuex的数据,打开播放器组件
效果图