在這一節，會封裝一些公用的函數來添加classname，改變image的寬度。

具體如下：

首先：封裝一個slider的組件

<template>  
  <div class="slider" ref="slider">  
    <div class="slider-group" ref="sliderGroup">  
      <slot></slot>  
    </div>  
    <div class="dots"></div>  
  </div>  
</
 
template>  

樣式如下：

.slider  
    min-height: 1px  
    .slider-group  
      position: relative  
      overflow: hidden  
      white-space: nowrap  
      .slider-item  
        float: left  
        box-sizing: border-box  
        overflow: hidden  
        text-align: center  
        a  
          display: block  
          width: 100%  
          overflow: hidden  
          text-decoration: none  
        img  
          display: block  
          width: 100%  
 

緊接著就是js部分的代碼了。

export default {  
  name: ‘Slider‘,  
  props: {  
    loop: {  
      type: Boolean,  
      default: true  
    },  
    autoPlay: {  
      type: Boolean,  
      default: true  
    },  
    interval: {  
      type: Number,  
      default: 4000  
    }  
  },  
  mounted () {  
    setTimeout(() 
 
=> {  
      this._setSliderWidth()  
      this._initSlider()  
    }, 20)  
  },  
  methods: {  
    _setSliderWidth () {  
      this.children = this.$refs.sliderGroup.children  
      let width = 0  
      let sliderWidth = this.$refs.slider.clientWidth  
      for (let i = 0; i < this.children.length; i++) {  
        let child = this.children[i]  
        addClass(child, ‘slider-item‘)  
        child.style.width = sliderWidth + ‘px‘  
        width += sliderWidth  
      }  
  
      if (this.loop) {  
        width += 2 * sliderWidth  
      }  
      this.$refs.sliderGroup.style.width = width + ‘px‘  
    },  
    _initSlider () {  
  
    }  
  }  
}  

export function addClass (el, className) {  
  if (hasClass(el, className)) {  
    return  
  }  
  let newClass = el.className.split(‘ ‘)  
  newClass.push(className)  
  el.className = newClass.join(‘ ‘)  
}  
export function hasClass (el, className) {  
  let reg = new RegExp(‘(^|\\s)‘ + className + ‘(\\s|$)‘)  
  return reg.test(el.className)  
}  

遇到的問題：上面這樣寫完後。slide-item的class名字不能添加上，什麽原因。

在這裏的問題我反復看了一下，具體的意思如下。

這樣，就解決了。

然後呢，通過betterscroll來讓圖片輪播：

vue慕課網音樂項目手記：5-手寫滾動輪播圖（上）