uniapp微信小程序实现音乐歌词滚动

在uni-app（又名Vue CLI for Wechat）中实现微信小程序的音乐歌词滚动功能，你可以通过结合HTML、CSS以及JavaScript（主要是处理音频进度和歌词同步）来完成。以下是基本步骤：

1. **准备组件**：
创建一个新的页面，例如`lyric.vue`，在这个文件中定义HTML结构，包含一个用于显示歌词的滚动区域，如`<div class="lyric-scroll">...</div>`。

2. **样式设置**：
在`style scoped`部分添加CSS规则，比如让滚动区域宽度固定，设置滚动动画等。例如：

   .lyric-scroll {
       width: 100%;
       height: 50px;
       overflow-y: auto;
       white-space: nowrap;
       -webkit-scrollbar: none; /* 隐藏滚动条 */
   }

3. **获取歌词数据**：
通常歌词数据会存储在一个JSON对象或者API返回的数据中，你需要预先加载并解析歌词。

4. **绑定音频事件**：
使用`uni.createAudioContext()`创建音频上下文，并监听`timeupdate`事件，当音频播放到对应的时间点时更新歌词滚动位置。

export default {
  data() {
    return {
      audioCtx: null,
      lyricList: [],
      currentLyricIndex: 0,
    };
  },
  mounted() {
    this.audioCtx = uni.createAudioContext();
    this.audioCtx.onTimeUpdate(() => {
      this.updateLyricScroll();
    });
    // 加载并初始化音频
    this.initAudio();
  },
  methods: {
    initAudio() {
      // 初始化音频...
      this.playMusic();
    },
    updateLyricScroll() {
      let progress = (this.audioCtx.currentTime / this.audioDuration) * (this.lyricList.length - 1);
      let index = Math.floor(progress);
      if (index !== this.currentLyricIndex) {
        // 更新滚动位置和当前歌词
        this.$refs.lyricScroll.scrollTop = 0;
        this.currentLyricIndex = index;
        console.log(this.lyricList[index]);
      }
    },
    playMusic() {
      // 播放音乐代码...
    },
  },
};