上面两篇文章介绍了一下自定义的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.titleaudioManager.epnameaudioManager.singeraudioManager.coverImgUrlaudioManager.srcaudioManager.pausedaudioManager.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监听

原著是一个有趣的人,若有侵权,请通知删除