做了一个音乐进度条的组件processbar:
processbar.wxml代码如下:
processbar.js代码如下:
// components/processbar.js
//得到背景音乐管理器
let bgMusicManager=wx.getBackgroundAudioManager()
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
nowTime:"00:00",
totalTime:"00:00",
maxValue: 0,
ctTime:0 //当前进度条的值
},
//生命周期函数
lifetimes:{
//ready:加载页面时触发
ready(){
this.init() //初始化页面
}
},
/**
* 组件的方法列表
*/
methods: {
init(){
// 只有在时间更新的事件中才能得到音乐总时长
bgMusicManager.onTimeUpdate(()=>{
//得到总时长(秒数)
const tlTime=bgMusicManager.duration
//设置总时长
this.setData({
totalTime: this.transToMS(tlTime),
maxValue: Math.floor(tlTime)
})
// console.log(bgMusicManager.currentTime)
//设置当前时长
const t1=Math.floor(bgMusicManager.currentTime)
this.setData({
ctTime: t1,
nowTime: this.transToMS(t1)
})
})
},
//将秒数转换成00:00的形式
transToMS(seconds){
const m=Math.floor(seconds/60);
const s=Math.floor(seconds%60);
const minute=m<10?("0"+m):(""+m);
const second=s<10?("0"+s):(""+s);
return minute+":"+second;
},
changing(e){
},
changed(e){
//跳转歌曲时间
bgMusicManager.seek(e.detail.value);
},
}
})
运行截图:
现在如果滑动进度条,进度条会出现抖动,我觉得可能是因为在onTimeUpdate()中设置了当前时间,导致出现的抖动,但我不知道如何改代码,把设置当前时间的代码放在哪??求指教!!
emm...完全没有看懂呢(因为你直接贴代码很不直观)。哈哈哈😂
不过根据我猜测的逻辑啊,你应该是在音乐播放过程中动态的根据当前播放进度设置进度条的位置,然后现在你想手动操作进度条快进,但是出现进度条抖动,
其实你只要在 进度条的滑动开始事件 设置一个变量 比如 move = true,然后在 ‘根据当前播放进度设置进度条的位置’ 这个操作的前面加个判断 如果 move == true 就直接返回,然后在 进度条的滑动结束事件 中将 move = false 就行了
像我的话自己还要获取进度更新歌词什么的,就写了俩监听函数,一个带更新滑动条,一个不带,changing清掉带的,设置不带的,changing不管三七二十一清掉定时器,设置成带更新的(但这样的弊端是如果一直changing那不带更新滑动条的函数实际很少发挥作用)
另一种简单的做法就像答主说的,设置一个变量来控制是否更新(将新的进度赋值给value),如果未在拖动就设置成更新的时间,如果在滑动就不给设置(没实践过),changing事件和change事件的配合思想同上
点击进度条和拖动滑块要清理定时器,完成动作在恢复定时器
我做的时候也是slider出现过抖动,最后现在滑动的时候暂停音乐并且不设置slider的value值,抖动就咩有了