1. Vuex?https://blog.csdn.net/weixin_40814356/article/details/80347366

編寫：

然后，在main.js中引入

在組件中改變state的狀態

調用如下：

這樣就成功拿到數據了。

2.如何為betterScroll向上滾動的時候添加一個layer https://blog.csdn.net/weixin_40814356/article/details/80361460

3.?如何創建一個js中的prefix ??https://blog.csdn.net/weixin_40814356/article/details/80362685

4. 播放頁面的布局??https://blog.csdn.net/weixin_40814356/article/details/80372040

5.列表頁到播放頁的動畫，通過vue的鉤子添加動畫?https://blog.csdn.net/weixin_40814356/article/details/80373592

6.音樂播放的實現

音樂的播放是基于h5的audio來實現的。?然后：在currentSong變化的時候，去調用play()方法：

watch: {

currentSong () {this.$nextTick(() =>{this.$refs.audio.play()

})

},

因為當音樂還沒有獲取的時候，不能調用play，所以要用$nextick ? 將回調延遲到下次 DOM 更新循環之后執行。在修改數據之后立即使用它，然后等待 DOM 更新

那么如何控制play的狀態呢？

1

2

3

4

5

在state中定義了一個狀態playing

點擊click的時候，去改變這個playing。怎么改變呢，通過actions

然后，通過mutation去改變他的狀態：

這里通過getter拿到playing

然后在點擊事件的時候去改變它的狀態：

但是問題是，這里點擊的時候，只能改變playing的狀態，卻不能改變audio的播放或者暫停。處理如下：

watch? playing的變化。如果是true，就play()。否則pause()。

總結

以上是生活随笔為你收集整理的vue音乐笔记_Vue音乐项目笔记（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。