歌曲詳情頁面

歌曲詳情頁面    定位fixed  脫離文件流 

swiper框架中的內容  定位  脫離文件流

swiper定位的z-index更高或者class優先順序高於歌曲詳情頁面導致歌曲詳情無法覆蓋swiper部分,因為swiper是引入的框架,框架的優先順序更高

修改swiper.css的程式碼即可

定義一個show=false(意為預設不顯示),給playMusci元件繫結這個v-show=show,在歌曲小圓標頭像上繫結click=show=!show實現點選歌曲圖示顯示playMusic元件

已經可以點擊出來playMusic,現在定義一個返回按鈕

實現思路:

定義一個自定義函式back:show=!show,然後在playMusic頁面中觸發這個自定義函式

在返回按鈕上@click=”$emit(‘back’)”觸發back自定義函式並執行

將父元件中的歌曲詳情資料,暫停播放按鈕,暫停播放函式等傳輸到子元件中,使用props接受

<div class="bg" :style="{backgroundImage:`url(${playDetail.al.picUrl})`}"></div>

加上背景圖

加上底部的六個按鈕,並給播放和暫停按鈕呼叫play和paused函式

獲取歌詞:

歌詞是元件之間共享的資料

在store/index.js中定義

在state中定義一個lyric:””空來接收當前播放歌曲的歌詞

在mutations中定義一個新的函式setLyric來修改歌詞的資料

在actions中定義一個reqLyric獲取歌詞的函式

由於用到了await非同步處理,所以加上了async,這裡的let就是獲取到的歌詞資料

獲取歌詞函式的呼叫應在playController中的mounted生命週期函式中呼叫.

由於是非同步actions中的方法,所以這裡使用ispatch觸發

淺淺截個圖來直接說明兩者的不同 以及觸發方式

這時我們的當前歌曲的歌詞已經儲存在了state.lyric中,直接在前端歌詞頁面引入即可

<p>{{$store.state.lyric}}</p>

一個動態class繫結

播放時                                       暫停時

這時通過一個動態class的繫結,在css中修改transform樣式達到動畫效果

使用一個:class=”active=!paused”,在css中定義active的transform樣式

Paused就是之前寫好的播放與暫停的判斷函式