制作者：天下鈔票

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

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

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

亮點(diǎn)二、頁(yè)面之間的參數(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è)頁(yè)面實(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)畫(huà)、音樂(lè)播放的控制等等，不再一一說(shuō)明，有興趣的可以自己查找代碼分析。  另外：學(xué)姐有篇后臺(tái)音樂(lè)播放注意事項(xiàng)，做音樂(lè)播放的可以參考一下。http://www.wxapp-union.com/portal.php?mod=view&aid=2111

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