在Vue项目中使用vue-aplayer插件时,做分页的效果,点击下一页音频数据不会更新,但是他会默认从头开始

这是组件

<div class="demoThree" style="width: 100%">
<aplayer  autoplay
        :music="{
                title: ' ',
                artist: ' ',
                src: voice,
                pic: ' ',
                }"
                />
</div>

在下面得到数据的函数赋值的时候

 if (data.data.data.records[0].audioPath!=null&&data.data.data.records[0].audioPath!=''){
        this.voice=data.data.data.records[0].audioPath;
}

后台返回数据中没有这条数据就不会赋值,但是音频也从0开始

可能是因为在点击下一页时,Vue-Aplayer插件并没有及时更新音频数据导致的。你需要在点击下一页时,通过代码手动更新音频数据并重新播放。

你可以将更新音频数据的代码写在watch或者computed中,当你的音频数据变化时,这些方法会自动触发。在代码中,你需要先暂停当前的音频,然后更新音频数据,最后重新播放音频。

例如,假设你的音频数据存储在audioList中,你可以在watch中监听currentPage的变化,并在变化时更新音频数据,代码如下:

watch: {
  currentPage: function(newPage) {
    // 计算新的音频列表
    const startIndex = (newPage - 1) * this.pageSize;
    const endIndex = Math.min(startIndex + this.pageSize, this.totalCount);
    const newAudioList = this.allAudioList.slice(startIndex, endIndex);

    // 暂停当前的音频
    this.$refs.ap.pause();

    // 更新音频列表
    this.audioList = newAudioList;

    // 重新播放音频
    this.$nextTick(() => {
      this.$refs.ap.play();
    });
  }
}

上面的代码中,我们首先计算新的音频列表,然后暂停当前的音频,更新音频数据,最后重新播放音频。请注意,我们在更新音频数据之后,通过$nextTick方法延迟播放音频,以确保Vue-Aplayer插件已经渲染了新的音频数据。

当然,这只是一个简单的示例,你需要根据你的具体情况来编写代码。希望这能帮到你