这是组件
<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插件已经渲染了新的音频数据。
当然,这只是一个简单的示例,你需要根据你的具体情况来编写代码。希望这能帮到你