制作者：天下鈔票

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

一個很不錯的音樂播放demo

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

亮點二、頁面之間的參數(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. //上一個頁面實例對象
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. }

這個方法你知道嗎？

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

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