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

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

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

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

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

代码只截取了片段

歌曲组件

//自定义属性将id和index绑定
<li
  v-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 = "";
      }
    },
}
  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值