VUE實戰--網易雲音樂

VUE實戰--網易雲音樂

知識點：

1. 音樂的暫停播放。
2. 歌詞的動態匹配。

動態組件：

根據is 屬性 後面的組件名匹配

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

背景模糊：

能夠利用僞類選擇器， 來給背景來一層， rgba（0，0，0，0.5）模糊

audio標籤：

1. audio 沒有controls 屬性 不在頁面中顯示
2. 經過下面的兩個方法能夠播放&暫停 音樂
3. 點擊子組件中的按鈕實現音樂的播放與暫停， 實際是經過字父組件的傳值，來調用方法 。子組件種樣式的改變是經過css來實現的。

頁面切換動畫：

運用動態組件， 先讓動態組件匹配過渡頁面， 當過渡頁面完成匹配真正的主頁。


上圖就是監聽頁面的load事件，完成後就切換動態組件的匹配

封裝FETCH


動態綁定樣式：


歌詞滾動的實現：

1. 把歌詞數據 轉化成數組可迭代的形式：

運用正則表達式來匹配到全部的 歌詞， 以歌詞中的事件。


2.audio標籤實例currentTime屬性

能夠經過下面的方式獲取到歌曲播放的時間： （單位爲s） 而後傳遞給子組件


在播放時獲取時間而且傳遞，在暫停時取消獲取


3.具體歌詞索引的獲取

對應哪一句歌詞就是比播放到的時間小&&最接近的那個


以後動態添加高亮的樣式給相應的那個p標籤

4.歌詞區域的滾動

監聽對應歌詞的改變，隨着改變進行歌詞區域的向上平移就能夠了


上面經過js的方式獲取到了每個p標籤的高度加上p上下兩邊的所佔的長度， 即爲每句歌詞須要滾動的距離。

具體樣式更精細的實現能夠再精細一點！