标签：Vue -- 歌词 获取 详解 歌曲 切换 播放 详情

歌曲播放模块

（1）创建歌曲详情组件

（2）在全局播放组件中引入歌曲详情组件

 

（3）设置点击事件跳转页面显示及点击取反触发返回页面消失

 

 

 

（4）传递歌曲详情、歌曲暂停播放按钮显示的条件以及play函数（控制歌曲播放暂停）并在子组件中接收

 

 

（5）展示数据

1.引入矢量图标

2.获取真实数据展示

3.设置动态class绑定，当添加class名称，active：true为音乐正在播放，active：false为音乐暂停，唱片的唱臂跟随歌曲的播放暂停同步进行改变

 

4.准备一个变量控制唱片与歌词的切换并使用v-if和v-else进行绑定设置

 

显示唱片：

 

显示歌词：

 

（6）歌词详情

1.获取歌词的api进行封装，并将其抛出

  

 

2.在mutations中定义一个函数，用来修改歌词数据

   

3.获取歌词详情的函数，payload传递参数，payload.id当前歌曲的id，content修改歌词内容为当前获取的歌词详情

 

4.全局播放组件获取歌曲歌词详情，使用mounted进行获取默认当前歌曲的歌词，默认播放歌曲发生改变时使用updated获取切换歌曲的歌词

 

（7）歌曲切换

1.给歌曲切换图标设置点击事件绑定goplay方法

 

 

2.设置goplay方法获取切换之后的歌曲下标，同时进行判断下标小于零即歌曲在第一首时在进行切换则切换到最后一首，而当下标等于歌曲数量长度时即歌曲在最后一首时在进行切换则切换到第一首

 

标签：Vue,--,歌词,获取,详解,歌曲,切换,播放,详情
来源： https://www.cnblogs.com/tanghuijun/p/16250799.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。