使用微信小程序 寫音樂播放器疾呻,遇到 關于 slider 組件抖動的問題
問題是這樣的:如果滑動或者點擊 進度條,進度條會出現(xiàn)抖動写半,這是可能是因為在onTimeUpdate()中計算 并且設置了當前時間岸蜗,導致出現(xiàn)的抖動。
解決思路:
1.解決拖動時產(chǎn)生的抖動
在 進度條的滑動開始事件 bindchanging 設置一個變量 比如 move = true叠蝇,然后在 ‘設置進度條的位置’ 這個代碼塊里面的上方加個判斷 如果 move == true 就直接返回璃岳,不進行設置進度條的位置,然后在 進度條的滑動結束事件bindchange 中將 move = false 就行
2.解決點擊或者拖動后,進度條抖動
slider有兩個事件:拖動中有個changing事件矾睦,單擊或者結束拖動時change事件
大概思路就是 :給changing事件清除 定時器晦款,change事件 再 設置定時器。
這個案例中需要獲取進度更新歌詞枚冗,所以寫兩個監(jiān)聽函數(shù)缓溅,一個更新滑動條,一個更新歌詞和歌詞的時間赁温,changing清掉 更新滑動的 定時器坛怪,change 設置新的定時器。
更新歌詞和歌詞時間的定時器不用管股囊,讓他自己更新著袜匿。如果要暫定歌曲,肯定也要暫停定時器稚疹,這時就要你自己寫一些關于歌曲是不是在播放的判斷在定時器里面居灯。
data: {
timerInterSlider: '',
timerInter: '',
},
onLoad: function (options) {
this.setData({
timerInter: setInterval(() => {
this.changeSlider2()
}, 500),
timerInterSlider: setInterval(() => {
this.changeSlider()
}, 500),
})
},
// 清除定時器語句 clearInterval(this.data.timerInterSlider)
// 記得在頁面銷毀時,清除定時器