Vue之網易雲音樂PC版輪播圖的實現

時間 2019-11-08

標籤 vue 網易音樂實現简体版

原文原文鏈接

Github - program-learning-lists
最近在刷網易雲音樂歌單時發現首頁的輪播圖頗有意思，正好本身想嘗試作一個PC版的網易雲音樂，因而就是使用Vue去作這個demo，廢話少說，我要出招了，接招吧vue

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

這個子組件主要分爲兩塊。
第一塊、輪播圖，其中它們的業務邏輯是git

自動切換
左右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，其中它們的業務邏輯是github

當前輪播圖對應位置的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了。
上面咱們講到輪播圖的業務邏輯，接下來，咱們就講講如何實現的的吧ide

自動輪播

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()
    }
  }
}