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

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

页面的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

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

• 自动切换
• 左右icon切换轮播图
• 点击前后轮播图切换轮播图
• 鼠标滑动到轮播图停止轮播，离开后继续轮播

Slider-content的DOM结构

<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>

Slider-content的样式(Stylus)

.slider-content
    position: relative
    width: 100%
    height: calc(100% - 20px)
    left: 0%
    top: 0%
    margin: 0px
    padding: 0px
    background-size: inherit
    .slider 
      position: absolute
      margin: 0
      padding: 0
      top: 0
      left: 50%
      width: 65%
      height: 100%
      transition: 500ms all ease-in-out
      background-color: #fff
      background-repeat: no-repeat
      background-position: center
      background-size: inherit
      transform: translate3d(-50%,0,-80px)
      z-index: 1
      &:before
        position: absolute
        content: ""
        width: 100%
        height: 100%
        top: 0
        left: 0
        background-color: rgba(0, 0, 0, 0)
        transition-delay: 100ms!important
        transition: all 500ms
        cursor: pointer
      &.active
        transform: translate3d(-50%, 0, 0)
        z-index: 20
      &.prev
        transform: translate3d(-75%, 0, -100px)
        z-index: 19
      &.next
        transform: translate3d(-25%, 0, -100px)
        z-index: 18
    i
      width: 17.5%
      display: none
      position: absolute
      top: 40%
      font-size: 22px
      color: rgba(255, 255, 255, 0.5)
      text-shadow: 0 0 24px rgba(0, 0, 0, 0.3)
      cursor: pointer
      z-index: 21
      &:first-child
        left: 0
      &:last-child
        right: 0
    &:hover
      i
        color: rgba(255, 255, 255, 0.8)
        display: block
    &.mask
      .slider 
        &.prev, &.next
          &:before
            background-color: rgba(0, 0, 0, 0.50)

第二块、底部的dot， 其中它们的业务逻辑是

• 当前轮播图对应位置的dot高亮
• 鼠标移动到相应的dot上切换对应位置的轮播图

Dots的DOM结构

<div class="dots" v-if="dots">
  <span v-for="(item, index) in list" :key="index"
    :style="setActiveDot(index)"
    @mouseover="currentIndex = index"></span>
</div>

Dots的样式(Stylus)

.dots 
  width: 100%
  height: 20px
  span
    display: inline-block
    width: 20px
    height: 2px
    margin: 1px 3px
    cursor: pointer

上面是页面的DOM结构和表现的实现代码，接下来我们要讲的是连招的实现，小心啦，我要摸眼W + R3了。
上面我们讲到轮播图的业务逻辑，接下来，我们就讲讲如何实现的的吧

自动轮播

play () {
  this.pause();
  if (this.autoPlay) {
    this.timer = setInterval(()=>{
      this.next();
    }, this.interval)
  }
}

暂停轮播

pause () {
  clearInterval(this.timer);
}

Icon切换轮播图

next () {
  this.currentIndex = ++this.currentIndex % this.list.length;
},
prev () {
  this.currentIndex = this.currentIndex === 0 ? this.list.length - 1 : this.currentIndex - 1;
},

前后轮播图的切换轮播图

onClick (i) {
  if (i === this.currentIndex){
    this.$emit('sliderClick', i);
  } else {
    let currentClickClassName = this.sliderDomList[i].className.split(' ')[1]
    console.log(currentClickClassName)
    if (currentClickClassName === 'next') {
      this.next()
    } else {
      this.prev()
    }
  }
}

dots轮播图的切换轮播图

这里比较简单，只需要设置它的鼠标事件即可

@mouseover="currentIndex = index"

代码传送门：Vue网易云音乐轮播图的实现

知乎

个人博客

Github