better-scroll 横向轮播

<template>
  <div class="box" ref="box">
    <div class="slide-box" ref="slideBox">
      <div class="slide-item" v-for="(item,i) in imgList" :key='i'>
        <a>
          <img :src="item.src"/>
        </a>
      </div>
    </div>
    <div class="dots">
      <a :class="[currentPageIndex === i ?'active':'', 'dot']" v-for="(item ,i) in imgList" :key='i'></a>
    </div>
  </div>
</template>
<style scoped>
  .box{
     position: relative;
  }
  .slide-box{
    display: flex
  }
  .slide-item{
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  .slide-item a{
    display: block;
    width: 100%;
    text-decoration: none;
    overflow: hidden;

  }
  .slide-item img{
    display: block;
    width: 100%
  }
  .dots{
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    bottom: 12px;
  }
  .dot{
    display: inline-block;
    margin: 0 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.5)
  }
  .active{
    width: 20px;
    background-color: #eeeeee;
  }
</style>
<script>
import BScroll from 'better-scroll'
export default {
  data () {
    return {
      imgList:[
        {
          src: 'http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/2087356.jpg'
        },{
          src: 'http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/2084517.jpg'
        },{
          src: 'http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/2091145.jpg'
        },{
          src: 'http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/2089891.jpg'
        },{
          src: 'http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/2086700.jpg'
        }
      ],
      currentPageIndex: 0,
      loop: true,
      autoPlay: false
    }
  },
  mounted () {
    this.$nextTick(() => {
      this._setSliderWidth()
      this._initSlider()
      if(this.autoPlay) {
        this._play()
      }
    })
    window.addEventListener('resize', () => {
      if(!this.scroll) {
        return
      }
      this._setSliderWidth(true)
      this.scroll.refresh()
    })
  },
  methods:  {
    _setSliderWidth (isResize) {
      this.children = this.$refs.slideBox.children
      let width = 0
      let sliderWidth = this.$refs.box.clientWidth
      for(let i=0; i<this.children.length; i++) {
        let child = this.children[i]
        child.style.width = sliderWidth + 'px'
        width += sliderWidth
      }
      if(this.loop && !isResize) {
        width += 2*sliderWidth
      }
      this.$refs.slideBox.style.width = width + 'px'
    },
    _initSlider () {
      this.scroll = new BScroll('.box', {
        scrollX: true,
        scrollY: false,
        momentum: false,
        snap: true,
        snapLoop: this.loop,
        snapThreshold: 0.3,
        snapSpeed: 400
      })

      this.scroll.on('scrollEnd', () => {
        let pageIndex = this.scroll.getCurrentPage().pageX
        // console.log(pageIndex)
        if(this.loop){
          pageIndex -= 1
        }
        this.currentPageIndex = pageIndex
        if(this.autoPlay) {
          clearTimeout(this.timer)
          this._play()
        }
      })
    },
    _play () {
      let pageIndex = this.currentPageIndex+ 1
      // 因为loop对应的index是从1开始的
      if(this.loop) {
        pageIndex += 1
      }
      this.timer = setTimeout(() => {
        this.scroll.goToPage(pageIndex, 0, 400)
      }, 4000)
    }
  }
}
</script>