008_Vue音乐播放器(歌手详情页面的开发)

从上一篇,获取得到歌手信息之后,通过vuex 来获取数据,拿到数据后,创建歌曲列表组件 music-list.vue

页面dom结构,分为头部(返回按钮,歌手姓名), 歌手图片 ,歌曲列表。

header头部有做一个遮罩层的处理,通过css3的颜色渐变,使头部标题不会与头部背景图颜色重叠

其中 歌手 图片由歌手列表传入,由于图片尺寸太小,在这我使用正则表达式对图片请求的url进行修改,拿到大一号的背景图,

songlist.vue 是歌曲列表组件,本应用所有页面组件统一使用的歌曲列表组件。在这只是简单的显示歌曲信息,后续将为其添加点击事件,修改vuex的数据,打开播放器组件

效果图

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值