better-scroll制作轮播图第一篇

使用better-scroll制作轮播图,html结构要按照它规定的来

  <div class="slider" ref="slider">
    <div class="slider-group" ref="sliderGroup">
      <div v-for="(item, index) in sliderList" >
        <img :src="item.imgUrl" alt="">
      </div>
    </div>
  </div>

然后是js部分,先贴出代码

import BScroll from 'better-scroll'
  export default {
    name: 'slider',
    data () {
      return {
        currentPageIndex: 0,
        sliderList: [
          {imgUrl: 'http://mazhaoyang.cn/demos/image/img-md1.jpg'},
          {imgUrl: 'http://mazhaoyang.cn/demos/image/img-md2.jpg'},
          {imgUrl: 'http://mazhaoyang.cn/demos/image/img-md3.jpg'},
          {imgUrl: 'http://mazhaoyang.cn/demos/image/img-md4.jpg'}
        ]
      }
    },
    methods: {
      _addClass (el, className) {
        if (this._hasClass(el, className)) {
          return
        }
        let classArr = el.className.split(' ')
        classArr.push(className)
        el.className = classArr.join(' ')
      },
      _hasClass (el, className) {
        let reg = new RegExp('(^|\\s)' + className + '($|\\s)')
        return reg.test(el.className)
      },
      _initWidth () {
        let sliderGroup = this.$refs.sliderGroup
        let slider = sliderGroup.children
        let sliderWidth = this.$refs.slider.clientWidth
        let allWidth = 0
        for (let i = 0; i < slider.length; i++) {
          allWidth += sliderWidth
          slider[i].style.width = sliderWidth + 'px'
          this._addClass(slider[i], 'slider-item')
        }
        allWidth += 2 * sliderWidth
        sliderGroup.style.width = allWidth + 'px'
      },
      _initSlider () {
        let scroll = new BScroll(this.$refs.slider, {
          scrollY: false,
          scrollX: true,
          momentum: true,
          snap: true,
          snapLoop: true,
          snapThreshold: 0.1,
          snapSpeed: 400
        })
        scroll.on('beforeScrollStart ', () => {
          clearTimeout(this.timer)
        })
      }
    },
    mounted () {
      setTimeout(() => {
        this._initWidth()
        this._initSlider()
      }, 20)
    }
  }
data()部分定义一个currentPageIndex作为当前索引。

methods部分,首先定义两个方法,用来添加class。

_hasClass()

用来判断是否已经有了这个class,有了就不用加了。这里用了一个正则,

let reg = new RegExp('(^|\\s)' + className + '($|\\s)')

_addClass

方法中,先把现有className转成数组,然后把新的class添加进去,再转回字符串赋给el。

_initWidth()

先通过ref获取到sliderGroup以及容器的宽。然后for循环设置值。这里需要注意的是,如果bscroll是loop模式,他会自动多生成两个slider,所以有了allWidth += 2*sliderWidth。

_initSlider()

初始化bscroll对象,相关配置参数见:https://www.npmjs.com/package/better-scroll

mounted()

bscroll对初始化时间要求比较严,需要在所有dom渲染完成之后,不然他没办法正确计算。在mounted时,用setTimeout加20ms,进行初始化,以确保计算正常。浏览器显示需要18ms,所以这个20ms的选择也是有讲究的。

然后是css部分。

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



随机浏览