最近在跟著視頻補(bǔ)習(xí)Vue。仿QQ音樂上的輪播圖。用了better-scroll

HTML部分，主要是三個部分。slider表示最外層容器，slider中包含slider-group和dots。slider-group表示輪播的具體內(nèi)容和dots表示圖中的小圓點(diǎn)。

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

          </slot>
      </div>
      <div class="dots">
          <span class="dot" v-for="(item,index) in dots" :class="{active:currentPageIndex===index}"></span>
      </div>
  </div>
</template>

js部分
1、設(shè)置組件的屬性

props: {
    /*可循環(huán)*/
    loop: {
      type: Boolean,
      default: true
    },
    /*自動播放*/
    autoPlay: {
      type: Boolean,
      default: true
    },
    /*間隔*/
    interval: {
      type: Number,
      default: 4000
    }
  },

2、邏輯部分分為三步：設(shè)置輪播內(nèi)容的寬度、初始化dots、初始化輪播內(nèi)容、自動播放
分別將這四部封裝給四個函數(shù)，在mounted中依次調(diào)用這四個函數(shù)。為了保證在dom已經(jīng)完全生成了，采用setTimeout設(shè)置一個20ms的延時，因?yàn)闉g覽器刷新一次的速度在17ms左右。

mounted() {
    setTimeout(() => {
      this._setSliderWidth(); //設(shè)置寬度
      this._initDots(); //初始化dots
      this._initSlider(); //初始化輪播內(nèi)容
      if (this.autoPlay) { //自動播放
        this._play();
      }
    }, 20);
    …………
}

在methods中分別編寫以上的四個函數(shù)
（1）_setSliderWidth----->設(shè)置每個輪播內(nèi)容的寬度、設(shè)置輪播內(nèi)容的父組件的寬度

 _setSliderWidth(isResize) {
      this.children = this.$refs.sliderGroup.children; //獲取到slidergroup中的每個子元素

      let width = 0;
      let sliderWidth = this.$refs.slider.clientWidth; //取到當(dāng)前的輪播圖的寬度（即為父元素的寬度）
      for (let i = 0; i < this.children.length; i++) { //設(shè)置每個輪播圖的寬度
        let child = this.children[i];
        addClass(child, "slider-item"); //addClass是一個封裝好為元素添加類名的函數(shù)，為字節(jié)點(diǎn)添加類名為slider-item 的類，進(jìn)行CSS部分的渲染
        child.style.width = sliderWidth + "px";//設(shè)置每個子節(jié)點(diǎn)的寬度
        width += sliderWidth;//累加計算父元素的總寬度
      }
      //如果是循環(huán)播放并且是首次初始化時，需要再加上頭尾兩個重復(fù)圖片的寬度。而當(dāng)瀏覽器調(diào)整大小的時候，父元素中的子元素已經(jīng)包含了首位重復(fù)圖片的元素，因此不需要進(jìn)行寬度的增加。
      if (this.loop && !isResize) { 
        width += 2 * sliderWidth;
      }
      this.$refs.sliderGroup.style.width = width + "px"; //將總寬度賦值給父元素
    },

（2）_initDots---->初始化dots的個數(shù)

_initDots() {
      this.dots = new Array(this.children.length);
},

（3）_initSlider----->創(chuàng)建和配置一個better-scroll的實(shí)例、在bscroll的scrollEnd事件中進(jìn)行當(dāng)前index的計算、重置定時器從當(dāng)前頁開始自動播放

_initSlider() {
      this.slider = new BScroll(this.$refs.slider, {//創(chuàng)建BScroll實(shí)例，并設(shè)置配置項
        scrollX: true,
        scrollY: false,
        moentum: false,
        snap: true,
        snapLoop: this.loop,
        snapThreshold: 0.3,
        snapSpeed: 400,
        click: true
      });

      this.slider.on("scrollEnd", () => {
        let pageIndex = this.slider.getCurrentPage().pageX;//獲取輪播到的當(dāng)前頁
        if (this.loop) {
          pageIndex -= 1;//去掉為了循環(huán)播放而多的第一頁
        }

        this.currentPageIndex = pageIndex;

        if (this.autoPlay) {
          clearTimeout(this.timer);//清除定時器
          this._play();//自動播放
        }
      });
    },

（4）_play---->計算輪播的當(dāng)前頁、調(diào)用Bscrol的gotopage進(jìn)行自動輪播

_play() {
      let pageIndex = this.currentPageIndex + 1; 
      if (this.loop) {
        pageIndex += 1; 
      }

      this.timer = setTimeout(() => {
        this.slider.goToPage(pageIndex, 0, 400);
      }, this.interval);
    }

3、額外代碼
（1）調(diào)整窗口時，輪播圖的寬度需要隨著變化

window.addEventListener("resize", () => {
      if (!this.slider) {
        return;
      }
      this._setSliderWidth(true);
      this.slider.refresh();
    });

（2）addClass（為dom元素添加類的方法）

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

（3）CSS代碼（這塊還沒細(xì)看，之后看了需要補(bǔ)）

<style lang="stylus" scoped>
@import '~common/stylus/variable';

.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%;
      }
    }
  }

  .dots {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 12px;
    text-align: center;
    font-size: 0;

    .dot {
      display: inline-block;
      margin: 0 4px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: $color-text-l;

      &.active {
        width: 20px;
        border-radius: 5px;
        background: $color-text-ll;
      }
    }
  }
}
</style>

4、總結(jié)
整個輪播圖的流程應(yīng)該是，構(gòu)建html框架，把圖片填進(jìn)去，這邊由于填充的內(nèi)容可以是圖片或者其他內(nèi)容，采用slot來編寫組件；初始化dots；利用better-scroll使得輪播圖可以動起來;利用dots的index和當(dāng)前滾動到的頁面index，來為特定的dot添加active樣式；每次滾動完一次都觸發(fā)自動輪播；利用gotopage來實(shí)現(xiàn)自動輪播。
這邊有個坑就是由于slot中的內(nèi)容是在父組件中初始化賦值的，可能會現(xiàn)在子組件已經(jīng)初始化完畢但是父組件由于需要取數(shù)據(jù)沒有初始化好的問題，會導(dǎo)致子組件在mounted中獲取不到一開始slot中的帶數(shù)據(jù)的值，因此可以在父組件中添加v-if，當(dāng)獲取到數(shù)據(jù)后再進(jìn)行子組件的渲染。