基于better-scroll 實現(xiàn)歌詞聯(lián)動功能的代碼

更新時間：2020年05月07日 09:36:13 作者：linong

BetterScroll 是一款重點解決移動端（已支持 PC）各種滾動場景需求的插件，BetterScroll 是使用純 JavaScript 實現(xiàn)的，這意味著它是無依賴的。本文基于better-scroll 實現(xiàn)歌詞聯(lián)動功能，感興趣的朋友跟隨小編一起看看吧

BetterScroll 是一款重點解決移動端（已支持 PC）各種滾動場景需求的插件。它的核心是借鑒的 iscroll 的實現(xiàn)，它的 API 設計基本兼容 iscroll，在 iscroll 的基礎上又擴展了一些 feature 以及做了一些性能優(yōu)化。

BetterScroll 是使用純 JavaScript 實現(xiàn)的，這意味著它是無依賴的。

正文

前段時間公司要做個歌詞標記功能，標記副歌、前奏、無效內(nèi)容等等。找了找沒有找到類似的實現(xiàn)，只能自己實現(xiàn)一把。

功能已經(jīng)上線了，這里記錄一下用到的相關內(nèi)容。

需求

可以拖動進度條修改播放進度
可以拖動歌詞來修改播放進度
播放時滾動歌詞
標記功能

測試地址：https://www.lilnong.top/stati ...

實現(xiàn)

技術棧是 Vue + vant + better-scroll。
開始調(diào)研的時候使用 vant 的 Picker 來實現(xiàn)了一下，發(fā)現(xiàn)滾動歌詞的時候沒有動畫，很難受改用了 better-scroll。

better-scroll

better-scroll 文檔

betterScrollList = new BScroll(wrapper,{
 probeType: 2, // 因為默認是不會調(diào)用 scroll 回調(diào)的，所以需要設置
 swipeTime: 300
})
betterScrollList.on('scroll', ()=>{
 //暫停歌曲
 //獲取當前用戶拖動的歌詞，計算規(guī)則如下
  // 當前y / 最大y * 歌詞行數(shù)
  // 當前y就是滾動的了多少
  // 最大y可以理解為高度
  // 上面計算出來就是進度比例。然后換算到行數(shù)就ok
})
betterScrollList.on('scrollEnd', ()=>{
 // 這里是校準到拖動歌詞的位置
 // 播放歌曲
})

probeType

值	描述
0	不派發(fā)
1	會非實時（屏幕滑動超過一定時間后）派發(fā)scroll 事件
2	會在屏幕滑動的過程中實時的派發(fā) scroll 事件
3	不僅在屏幕滑動的過程中，而且在 momentum 滾動動畫運行過程中實時派發(fā) scroll 事件