制(zhi)作者：天下(xia)鈔票

demo地址(zhi)：微信小程序demo：破車：音樂播放(fang)，循環，上首/下首，菜(cai)單(dan)

一個很不錯的(de)音樂播放demo

亮(liang)點一(yi)、使(shi)用swiper組(zu)件，制作(zuo)了一(yi)個(ge)頂部的tabBar，效果很(hen)不(bu)錯，可以(yi)左(zuo)右滑(hua)(hua)動(dong)切換(huan)整(zheng)個(ge)頁(ye)面(mian)(mian)(mian)(mian)，之前(qian)一(yi)直沒(mei)想到(dao)swiper組(zu)件可以(yi)滑(hua)(hua)動(dong)整(zheng)個(ge)頁(ye)面(mian)(mian)(mian)(mian)。。唯一(yi)感(gan)覺不(bu)足，頁(ye)面(mian)(mian)(mian)(mian)切換(huan)的時候標題頭下的橫線沒(mei)有(you)動(dong)畫移動(dong)效果，下面(mian)(mian)(mian)(mian)平滑(hua)(hua)移動(dong)，上面(mian)(mian)(mian)(mian)瞬間切換(huan)，視覺效果有(you)點突兀，有(you)興趣的同學可以(yi)利用css動(dong)畫使(shi)下劃線跟(gen)隨(sui)頁(ye)面(mian)(mian)(mian)(mian)相應移動(dong)，跟(gen)帖(tie)發出來有(you)獎(jiang)勵哦(e)。^_^

亮點二、頁(ye)面之間的參(can)數傳(chuan)遞方式，使用的代碼如(ru)下：

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. }

這個(ge)方法(fa)你知道嗎？

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

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