制作者：天下鈔票

demo地址：微信小程序demo：破車：音樂播放，循環(huán)，上首/下首，菜單

一個(gè)很不錯(cuò)的音樂播放demo

亮點(diǎn)一、使用swiper組件，制作了一個(gè)頂部的tabBar，效果很不錯(cuò)，可以左右滑動(dòng)切換整個(gè)頁面，之前一直沒想到swiper組件可以滑動(dòng)整個(gè)頁面。。唯一感覺不足，頁面切換的時(shí)候標(biāo)題頭下的橫線沒有動(dòng)畫移動(dòng)效果，下面平滑移動(dòng)，上面瞬間切換，視覺效果有點(diǎn)突兀，有興趣的同學(xué)可以利用css動(dòng)畫使下劃線跟隨頁面相應(yīng)移動(dòng)，跟帖發(fā)出來有獎(jiǎng)勵(lì)哦。^_^

亮點(diǎn)二、頁面之間的參數(shù)傳遞方式，使用的代碼如下：

1. itemClick: function(event) {
2. var p = event.currentTarget.id
3. var that = this
4. var pages = getCurrentPages()
5.  
6. if(pages.length > 1) {
7. //上一個(gè)頁面實(shí)例對(duì)象
8. var [color=Red]prePage = pages[pages.length - 2][/color]
9. prePage.changeData(this.data.tracks, p, 1)
10. wx.navigateBack({
11. url: '../home/index?currentTab=1'
12. })
13. }
14.  
15. }

這個(gè)方法你知道嗎？

亮點(diǎn)三、還有一些播放窗口的細(xì)節(jié)，比如樣式控制的背景模糊、圖像旋轉(zhuǎn)動(dòng)畫、音樂播放的控制等等，不再一一說明，有興趣的可以自己查找代碼分析。  另外：學(xué)姐有篇后臺(tái)音樂播放注意事項(xiàng)，做音樂播放的可以參考一下。http://www.wxapp-union.com/portal.php?mod=view&aid=2111

總體上，適合新手學(xué)習(xí)demo，也適合想做播放器的同學(xué)熟悉各種api。