vue 音乐播放器上一首下一首切换

根据自定义属性的值找到元素

我是使用监听来实现切换的，将v-for循环列表的index存储在vuex中，点击上一首或下一首改变index的值，在另一个组件中监听index，获取当前index值所在的元素，再获取元素上的歌曲的id，播放歌曲。

考虑到还有歌单中的歌曲和搜索的歌曲，感觉这么做要好一些

代码只截取了片段

歌曲组件

//自定义属性将id和index绑定
<liv-for="(item, index) in ReMusics":key="index":data-musicid="item.id":data-index="index"ref="remusic"
></li>

  computed: {lsUpDown() {return this.$store.state.reMusicIndex;},},watch: {lsUpDown(val) {/* 根据自定义属性获取元素 */let index = document.querySelector("li[data-index= '" + val + "' ]");/* 根据元素获取自定义属性的值 */let id = index.dataset.musicid;this.$store.state.reMusicId = id;//执行播放的功能 放在vuex中了this.$store.commit("getMusic");//console.log(index);},},updated: function () {//下一首的点击上限this.$store.state.reMusics = this.$refs.musics.children.length - 1;console.log(this.$store.state.reMusics);},

播放器组件

    <div class="player-btn"><i class="btn-prev" @click="prevMusic"></i><i class="btn-play" @click="playMusic">{{ btnPlay }}</i><i class="btn-next" @click="nextMusic"></i></div>

数据都放在vuex中了

methods: {//上一首prevMusic() {let index = this.$store.state.reMusicIndex;if (index === 0) {this.$store.state.reMusicIndex = 0;} else {this.$store.state.reMusicIndex--;this.btnPlay = "";}},//下一首nextMusic() {let index = this.$store.state.reMusicIndex;let reMusics = this.$store.state.reMusics;if (index === reMusics) {this.$store.state.reMusicIndex = reMusics;} else {this.$store.state.reMusicIndex++;this.btnPlay = "";}},
}

vue 音乐播放器上一首下一首切换相关推荐

基于android的网络音乐播放器-下载完成后下拉音乐列表刷新（八）
作为android初学者,最近把疯狂android讲义和疯狂Java讲义看了一遍,看到书中介绍的知识点非常多,很难全部记住,为了更好的掌握基础知识点,我将开发一个网络音乐播放器-EasyMusic来巩 ...
基于android的网络音乐播放器-添加viewpager和fragment实现滑动切换多个界面（二）
作为android初学者,最近把疯狂android讲义和疯狂Java讲义看了一遍,看到书中介绍的知识点非常多,很难全部记住,为了更好的掌握基础知识点,我将开发一个网络音乐播放器-EasyMusic来巩 ...
一款简单的本地音乐播放器，界面美观、包括主题切换、歌单管理等等
MeetMusic 项目地址:lijunyandev/MeetMusic 简介:一款简单的本地音乐播放器,界面美观.包括主题切换.歌单管理等等音乐-播放器-主题切换- App 效果图 ...
安卓简单音乐播放器——上一首、下一首、暂停和停止
安卓超简单音乐播放器功能上一首.下一首.暂停和停止歌曲状态控制语句: switch (control){// 播放或暂停case 1:// 原来处于没有播放状态if (status == 0x11 ...
android音乐播放器上一首,安卓源码（音乐播放器，有播放和下一首，和进度条等功能）...
[实例简介] 安卓音乐播放器,可以完美播放音乐,放下使用,在安卓eclipse下使用. [实例截图] [核心代码] Player └── Player ├── AndroidManifest.xml ...
计算机音乐播放器设置,Win7系统下设置默认音乐播放器的两种方法
可能很多新手用户不知道Win7系统下怎么设置默认音乐播放器?我们习惯将某一程序设置为默认打开方式,音乐播放器也可以这样子的.一些用户想把酷狗播放器.或者qq音乐设置为默认音乐播放器,只要打开音乐文件, ...
linux qt4 音乐播放器,Ubuntu 14.04下安装音乐播放器 Clementine 1.2.3
Clementine 是一款非常不错的自由开源音乐播放器,支持很多国外的云空间,比如box.com.Clementine使用qt4编写,灵感来自Amarok 1.4.Clementine还是一款跨平台 ...
【VUE音乐播放器】获取QQ音乐播放源地址
前言:在学习慕课网课程制作企业级音乐app中,发现之前的qq音乐播放地址均不可用了.于是折腾了一下,重新抓包获取地址. 1.获取分类歌单里面的歌曲列表在之前的代码里,如下红色圆中的歌单-歌曲列表显示 ...
一个月写完vue音乐播放器
前言我觉得每一段自己努力的时光都需要被自己记录下来,所以就有了想法记录我这一个月看视频的所得.在这个过程中自己没有像之前一样,遇到自己解决不了的问题就逃避.虽然说解决一个问题的速度还是有点慢,大概是 ...

vue 音乐播放器上一首下一首切换

vue 音乐播放器上一首下一首切换

根据自定义属性的值找到元素

vue 音乐播放器上一首下一首切换相关推荐

最新文章

热门文章

vue 音乐播放器上一首 下一首切换

vue 音乐播放器上一首 下一首切换

根据自定义属性的值找到元素

vue 音乐播放器上一首 下一首切换相关推荐

最新文章

热门文章

vue 音乐播放器上一首下一首切换

vue 音乐播放器上一首下一首切换

vue 音乐播放器上一首下一首切换相关推荐