VUE实战--网易云音乐

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

VUE实战--网易云音乐" title="网易云音乐">网易云音乐

VUE实战--网易云音乐

知识点：

  1. 音乐的暂停播放。

  2. 歌词的动态匹配。

动态组件：

根据is 属性 后面的组件名匹配

<component :is="组件的名字"></component>

背景模糊：

可以利用伪类选择器， 来给背景来一层， rgba（0，0，0，0.5）模糊

audio标签：

  1. audio 没有controls 属性 不在页面中显示

  2. 通过下面的两个方法可以播放&暂停 音乐![image-20200523214532329](/Users/jackson/Library/Application Support/typora-user-images/image-20200523214532329.png)

  3. 点击子组件中的按钮实现音乐的播放与暂停， 实际是通过字父组件的传值，来调用方法 。子组件种样式的改变是通过css来实现的。

页面切换动画：

运用动态组件， 先让动态组件匹配过渡页面， 当过渡页面完成匹配真正的主页。

![image-20200523214903726](/Users/jackson/Library/Application Support/typora-user-images/image-20200523214903726.png)

上图就是监听页面的load事件，完成后就切换动态组件的匹配

封装FETCH

![image-20200523215521004](/Users/jackson/Library/Application Support/typora-user-images/image-20200523215521004.png)

动态绑定样式：

![image-20200523215549464](/Users/jackson/Library/Application Support/typora-user-images/image-20200523215549464.png)

歌词滚动的实现：

1. 把歌词数据 转化成数组可迭代的形式：

运用正则表达式来匹配到所有的 歌词， 以歌词中的事件。

![image-20200523215824808](/Users/jackson/Library/Application Support/typora-user-images/image-20200523215824808.png)

2.audio标签实例currentTime属性

可以通过下面的方式获取到歌曲播放的时间： （单位为s） 然后传递给子组件

![image-20200523220043346](/Users/jackson/Library/Application Support/typora-user-images/image-20200523220043346.png)

在播放时获取时间并且传递，在暂停时取消获取

![image-20200523220814694](/Users/jackson/Library/Application Support/typora-user-images/image-20200523220814694.png)

3.具体歌词索引的获取

对应哪一句歌词就是比播放到的时间小&&最接近的那个

![image-20200523221055762](/Users/jackson/Library/Application Support/typora-user-images/image-20200523221055762.png)

之后动态添加高亮的样式给相应的那个p标签

4.歌词区域的滚动

监听对应歌词的改变，随着改变进行歌词区域的向上平移就可以了

![image-20200523221312197](/Users/jackson/Library/Application Support/typora-user-images/image-20200523221312197.png)

上面通过js的方式获取到了每一个p标签的高度加上p上下两边的所占的长度， 即为每句歌词需要滚动的距离。

具体样式更精细的实现可以再精细一点！

以上是 VUE实战--网易云音乐 的全部内容， 来源链接： utcz.com/z/380440.html

回到顶部