用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

Demo分析学习《三》破车:音乐播放,循环,上首/下首,菜单

纸飞机 2018-3-6 16:10

制作者:天下钞票demo地址:一个很不错的音乐播放demo亮点一、使用swiper组件,制作了一个顶部的tabBar,效果很不错,可以左右滑动切换整个页面,之前一直没想到swiper组件可以滑动整个页面。。唯一感觉不足,页面切 ...

制作者:天下钞票

demo地址:

一个很不错的音乐播放demo

亮点一、使用swiper组件,制作了一个顶部的tabBar,效果很不错,可以左右滑动切换整个页面,之前一直没想到swiper组件可以滑动整个页面。。唯一感觉不足,页面切换的时候标题头下的横线没有动画移动效果,下面平滑移动,上面瞬间切换,视觉效果有点突兀,有兴趣的同学可以利用css动画使下划线跟随页面相应移动,跟帖发出来有奖励哦。^_^

亮点二、页面之间的参数传递方式,使用的代码如下:

  1. itemClick: function(event) {
  2. var p = event.currentTarget.id
  3. var that = this
  4. var pages = getCurrentPages()
  5. if(pages.length > 1) {
  6. //上一个页面实例对象
  7. var [color=Red]prePage = pages[pages.length - 2][/color]
  8. prePage.changeData(this.data.tracks, p, 1)
  9. wx.navigateBack({
  10. url: '../home/index?currentTab=1'
  11. })
  12. }
  13. }

这个方法你知道吗?

亮点三、还有一些播放窗口的细节,比如样式控制的背景模糊、图像旋转动画、音乐播放的控制等等,不再一一说明,有兴趣的可以自己查找代码分析。
另外:学姐有篇后台音乐播放注意事项,做音乐播放的可以参考一下。

总体上,适合新手学习demo,也适合想做播放器的同学熟悉各种api。

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏