slider组件主体html

<template>
  <div class="slider">
    <div class="slider-group">       
      <slot>                                     //负责插入的图片
      </slot>
    </div>
    <div class="dots">        //dots负责slider组件下面的dot
    </div>
  </div>
</template>

slider主体的CSS(stylus)思路

  .slider      
    min-height: 1px
    position: relative       
    .slider-group
      position: relative     
      overflow: hidden      
      white-space: nowrap          //文本不会换行，暨图片会在同一行显示
      .slider-item
        float: left                        //左浮动
        box-sizing: border-box         //盒子属性
        overflow: hidden               
        text-align: center        //居中
        a                            //slot插槽里的图片，需要用a标签包裹
          display: block
          width: 100%
          overflow: hidden
          text-decoration: none
        img
          display: block
          width: 100%

slider主体实现(vue)

当一组图片使用slider组件后，用v-for循环渲染图片，slider组件需要计算出，图片所占的宽度
暨用_setSliderWidth()方法计算
计算出宽度后，需要用better-scroll对slider(dom)对象init，用_initSlider()方法init
此时，一个可以滑动的轮播图就做好了

_setSliderWidth()方法

//使用_setSliderWidth()前，
//需要在slider,slider-group添加ref="slider",ref="sliderGroup"方便获取dom对象
    _setSliderWidth() {
      this.children = this.$refs.sliderGroup.children    //获取到传入的图片(Array)
      let width = 0
      let sliderWidth = this.$refs.slider.clientWidth    //获取浏览器宽度
      for (let i = 0; i < this.children.length; i++) {
        let child = this.children[i]                  //第i+1个图片
      //  addClass(child, 'slider-item')         //为图片dom对象,添加slider-item的类(稍后再提)
        child.style.width = sliderWidth + 'px'     //为图片dom对象，设置宽度
        width += sliderWidth                // 得到总宽度
      }
      if (this.loop) {                        //loop代表slider组件是否可以循环       
         width += 2 * sliderWidth   //因为better-scroll的机制，如果循环，需要多设置两个宽度
      }
      this.$refs.sliderGroup.style.width = width + 'px'    //为slider dom设置总宽度
    }

_initSlider()方法

 //需要引用BScroll
//在vue实例前引用引用格式为
//import BScroll from 'better-scroll'
    _initSlider() {
      this.slider = new BScroll(this.$refs.slider, {      
        scrollX: true,          //横向滚动
        scrollY: false,         //纵向不滚动
        momentum: false,         //默认为true
//当快速在屏幕上滑动一段距离的时候，会根据滑动的距离和时间计算出动量， 
//并生成滚动动画
        snap: {       //高级选项snap
          loop: this.loop,      //支持循环
          threshold: 0.3,       //表示可滚动到下一个的阈值
          speed: 400        //速度
        },
        click: true       //BScroll默认阻止click原生的点击事件，需要设置click为true
      })