新版bscroll轮播图无缝切换

  用bscroll手写一个轮播图，过程中遇到了很多坑，最主要的原因是bscroll新旧版本造成的。新版本中的一些调用方式、属性和旧版本的有差别。接下来是思路：

一、基本雏形

创建轮播图组件（slider）
  slider表示最外层容器，slider中包含slider-group和dots。slider-group表示轮播的具体内容和dots表示图中的小圆点。

<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" :key="index" :class="{active: currentPageIndex === index}"></span>
      </div>
    </div>

  紧接着我们把css样式设置一下，slider-item后续需要动态添加，图片用a标签包裹起来，这样可以跳转链接

 .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%
         img
          display block
          width 100%
    .dots
      position absolute
      left 0
      right 0
      text-align center
      font-size 0
      bottom 12px
      transform translateZ(1px)
      .dot
        display inline-block
        margin 0 4px
        width 8px
        height 8px
        border-radius 50%
        background: hsla(0,0%,100%,.5)
        &.active
         width 20px
         border-radius 5px
         background: hsla(0,0%,100%,.8);
          

二、动态添加class样式

  这里封装的方法是为了添加slider-item方法

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

三、设置组件的属性

    props: {
      loop: {
        type: Boolean,
        default: true // 设置循环状态
      },
      autoPlay: { // 自动播放
        type: Boolean,
        default: true
      },
      interval: { // 轮播时间间隔
        type: Number,
        default: 4000
      }
    },

四、逻辑部分

  在mounted中依次调用这四个函数。为了保证在dom已经完全生成了，采用setTimeout设置一个20ms的延时，因为浏览器刷新一次的速度在17ms左右。并且在父组件调用的时候，记得加上v-if="recommends.length"进行限制。

mounted () { // mounted钩子函数，初始化better-scroll
      setTimeout(() => { // *页面刷新的时间在17ms左右，所以设置延时20ms，等待dom加载完成*
        this._setSliderWidth() // 初始化  设置容器宽度
        this._initDots()
        this._initSlider() // 初始化 bscroll
        if (this.autoPlay) {
          this._play()
        }
      }, 20)
    },

五、methods函数

1. _setSliderWidth----->设置每个轮播内容的宽度、设置轮播内容的父组件的宽度

 _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是一个封装好为元素添加类名的函数，为字节点添加类名为slider-item 的类，进行CSS部分的渲染
          addClass(child, 'slider-item')
          child.style.width = sliderWidth + 'px'
          width += sliderWidth
        }
 //如果是循环播放并且是首次初始化时，需要再加上头尾两个重复图片的宽度。而当浏览器调整大小的时候，父元素中的子元素已经包含了首位重复图片的元素，因此不需要进行宽度的增加。     
        if (this.loop) {
          width += 2 * sliderWidth
        }
        this.$refs.sliderGroup.style.width = width + 'px'
      },

2. _initDots---->初始化dots的个数

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

3. _initSlider----->创建和配置一个better-scroll的实例、在bscroll的scrollEnd事件中进行当前index的计算、重置定时器从当前页开始自动播放

 _initSlider () {
        this.slider = new BScroll(this.$refs.slider, { 
        //创建BScroll实例，并设置配置项
          scrollX: true,
          scrollY: false,
          momentum: false,
          click: true,
          // 改版之后的写法
          snap: {
            loop: this.loop,
            threshold: 0.3,
            speed: 400
          }
        })
        this.slider.on('scrollEnd', () => {
          let pageIndex = this.slider.getCurrentPage().pageX //获取轮播到的当前页
        // 新版改进，不需要此代码
          // if (this.loop) {
          //   pageIndex -= 1
          // }
          this.currentPageIndex = pageIndex
          if (this.autoPlay) {
            clearTimeout(this.timer) //清除定时器
            this._play()
          }
        })
      },

4. _play---->计算轮播的当前页、调用Bscrol的gotopage进行自动轮播

   旧版用的goToPage(x, y, time, easing)，新版用next()

_play () {
        // let pageIndex = this.currentPageIndex + 1
        this.timer = setTimeout(() => {
          this.slider.next(400)
        }, this.interval)
 }

六、关于视口改变

window.addEventListener('resize'）通过监听窗口改变事件，解决当窗口改变时，图片的宽度未发生改变的问题

 window.addEventListener('resize', () => {
        if (!this.slider){
          return
        }
        //窗口改变，重新调用_setSliderWidth（）方法
        this._setSliderWidth(true)
        //计算完宽度，重新计算 this.slider
        this.slider.refresh()
      })