如何用better-scroll实现歌词滚动联动效果？

本文共计948个文字，预计阅读时间需要4分钟。

BetterScroll 是一款针对移动端（已支持PC）的滚动插件，用于满足各种滚动场景的需求。其核心基于著名的 iScroll 实现，API 设计基本兼容 iScroll，并在其基础上扩展了一些功能和特性。

BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

BetterScroll 是使用纯 JavaScript 实现的，这意味着它是无依赖的。

正文

前段时间公司要做个歌词标记功能，标记副歌、前奏、无效内容等等。找了找没有找到类似的实现，只能自己实现一把。

功能已经上线了，这里记录一下用到的相关内容。

需求

• 可以拖动进度条修改播放进度
• 可以拖动歌词来修改播放进度
• 播放时滚动歌词
• 标记功能

测试地址：www.lilnong.top/stati ...

实现

技术栈是 Vue + vant + better-scroll。