258资源分享网

上面两篇文章介绍了一下自定义的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()

},

有问题请留言哦！