上面两篇文章介绍了一下自定义的progress 和 slider 组件,这篇文章介绍一下slider组件应用的实例
代码可在文末下载
这里的音频播放用的是后台音频播放的API:
wx.getBackgroundAudioManager()
在js文件中初始化这个api(全局)
需要用到该对象的方法如下
音频播放进度,建议在这个方法里更新当前播放时间,而不是自己另写一个计时器计时,因为当你狂按暂停播放的时候,你会发现计时器没走,音频却走了
audioManager.onTimeUpdate()
缓冲
audioManager.onWaiting()
音频播放结束
audioManager.onEnded()
快进 该方法快进到音频还剩6-10秒时在跳转到前面的时间会失效,目前还不知道原因,有知道的同学请留言解释一下
audioManager.seek()
暂停
audioManager.pause()
播放
audioManager.play()
停止
audioManager.stop()
用到的属性如下
audioManager.title
audioManager.epname
audioManager.singer
audioManager.coverImgUrl
audioManager.src
audioManager.paused
audioManager.buffered
以下五个方法监听slider的滑动和点击事件
在tap end 和 cancel 方法里执行seek事件
// 点击slider时调用
sliderTap: function (e) {
console.log("sliderTap")
this.seek()
},
// 开始滑动时
sliderStart: function (e) {
console.log("sliderStart")
},
// 正在滑动
sliderChange: function (e) {
console.log("sliderChange")
},
// 滑动结束
sliderEnd: function (e) {
console.log("sliderEnd")
this.seek()
},
// 滑动取消 (左滑时滑到上一页面或电话等情况)
sliderCancel: function (e) {
console.log("sliderCancel")
this.seek()
},
有问题请留言哦!
下载地址: demo
************ 更新 ***********
1、添加了控制监听的参数isMonitoring, 在滑动时取消ontimeupdate监听