Vue之网易云音乐PC版轮播图的实现

最新推荐文章于 2023-03-06 17:51:41 发布

原创

最新推荐文章于 2023-03-06 17:51:41 发布 · 置顶 · 4k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #网易云音乐 #轮播图

本文介绍如何使用Vue构建网易云音乐PC版的轮播图，包括自动轮播、暂停、图标切换、点选切换等功能的实现，详细讲解了DOM结构和样式，并提供了代码示例。

最近在刷网易云音乐歌单时发现首页的轮播图很有意思，正好自己想尝试做一个PC版的网易云音乐，于是就是使用Vue去做这个demo，废话少说，我要出招了，接招吧

网易云音乐PC版轮播图

页面的DOM结构

<template>
  <div class="slider-container" ref='slider'
       :style="sliderStyle"
       @mouseover="pause()"
       @mouseout="play()">
    <div class="slider-content" :class="mask ? 'mask' : ''">
      <div class="slider" v-for="(item, index) in list"
        :key="index"
        :class="setClass(index)"
        @click="onClick(index)" :style="setBGImg(item.src)">
      </div>
      <i v-show="arrow" class="iconfont icon-left" @click="prev()"></i>
      <i v-show="arrow" class="iconfont icon-right" @click="next()"></i>
    </div>
    <div class="dots" v-if="dots">
      <span v-for="(item, index) in list" :key="index"
        :style="setActiveDot(index)"
        @mouseover="currentIndex = index"></span>
    </div>
  </div>
</template>

Slider-container的样式(Stylus)

.slider-container
  width: 100%
  height: 100%
  text-align: center
  padding: 10px 0
  position: relative

这个子组件主要分为两块。
1. 轮播图，其中它们的业务逻辑是

自动切换
左右icon切换轮播图

最低0.47元/天解锁文章