1. 程式人生 > 其它 >Vue實戰網易雲音樂--歌曲播放頁面詳解

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方法獲取切換之後的歌曲下標,同時進行判斷下標小於零即歌曲在第一首時在進行切換則切換到最後一首,而當下標等於歌曲數量長度時即歌曲在最後一首時在進行切換則切換到第一首