vue使用better-scroll做轮播图（1.X版本 比较简单）

首先布局界面

<template>
  <div class="slider" ref="slider">
    <div class="sliderGroup" ref="sliderGroup">
      <img v-for="(item,index) of items" :src="item.icon" @click="$emit('itemClick',index)">
    </div>
    <div class="dots">
      <span class="dot" v-for="(item,index) of items" :class="{active: currentIndex === index}" :key="index"></span>
    </div>
  </div>
</template>

布局的样式

.slider {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .sliderGroup {
    overflow: hidden;
  }

  .sliderGroup img {
    display: inline-block;
    float: left;
    height: 100%;
  }

  .dots {
    position: absolute;
    right: 5px;
    bottom: 0;
  }

  .dot {
    display: inline-block;
    margin: 2px;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background-color: darkgrey;
  }

  .dot.active {
    background-color: #2aca76;
  }

js代码

 

import BScroll from 'better-scroll'

  export default {
    name: "RotationView",
    props: {
      //带图片的数据 只要数据含有icon字段存储的是图片地址即可
      items: {
        type: Array,
        default() {
          return []
        }
      },
      //是否循环播放
      loop: {
        type: Boolean,
        default: true
      },
      //是否自动播放
      autoPlay: {
        type: Boolean,
        default: true
      },
      //播放间隔
      interval: {
        type: Number,
        default: 3000
      },
      //宽高比例
      ratio: {
        type: Number,
        default: 0.25
      }
    },
    data() {
      return {
        slider: null,
        width: 300,
        height: 100,
        currentIndex: 0,
        timer: null
      }
    },
    computed: {},
    watch: {
      items: {
        handler(newValue, oldValue){
          //数据可能是网络加载的比较慢 这里监听数据变化再去初始化轮播组件
          this.$nextTick(() => {
            this.initSlider()
          })
          //慎用setTimeout 极大可能造成卡顿
          //setTimeout(() => {
            //this.initSlider()
          //},20)
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initLayout()
      })
      //setTimeout(() => {
        //this.initLayout()
      //}, 20)
    },
    methods: {
      initLayout() {
        this.width = this.$refs.slider.clientWidth
        this.height = this.width * this.ratio
        this.$refs.slider.style.height = this.height
        this.$refs.sliderGroup.style.height = this.height
        this.initSlider()
      },
      initSlider() {
        if(this.items.length <= 0) return
        let contentWidth = this.width * this.items.length
        if (this.loop) contentWidth += this.width * 2
        let childItems = this.$refs.sliderGroup.children
        for (let i = 0; i < childItems.length; i++) {
          let child = childItems[i]
          child.style.width = this.width + 'px'
          child.style.height = this.height + 'px'
        }
        this.$refs.sliderGroup.style.width = contentWidth + 'px'

        this.slider = new BScroll(this.$refs.slider, {
          scrollX: true, //当设置为 true 的时候，可以开启横向滚动
          scrollY: false,
          //当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后）派发scroll 事件；
          //当 probeType 为 2 的时候，会在屏幕滑动的过程中实时的派发 scroll 事件；
          //当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。
          //如果没有设置该值，其默认值为 0，即不派发 scroll 事件。
          //probeType: 1,
          //eventPassthrough: 'vertical',//竖向保持原生滚动
          momentum: false,
          snap: {
            loop: this.loop,
            threshold: 0.1,
            speed: 400,
            //easing 表示滚动的缓动函数 先记录下来 不清楚有什么用
            easing: {
              style: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
              fn: function (t) {
                return t * (2 - t)
              }
            }
          }
        })

        this.slider.on('scrollEnd', () => {
          this.currentIndex = this.slider.getCurrentPage().pageX
          clearTimeout(this.timer)
          if (this.autoPlay) this.play()
        })

        if (this.autoPlay) this.play()
      },
      play() {
        let playPage = this.currentIndex + 1
        if (playPage === this.items.length) {
          playPage = 0
        }
        this.timer = setTimeout(() => {
          this.slider.goToPage(playPage)
        }, this.interval)
      }
    },
    created() {

    }
  }

 

注意better-scroll options配置 不需要配置click:true 如果配置了，内部控件点击事件会触发多次

 

没啥太大难度(轮播的实现 better-scroll基本都替我们实现好了) better-scroll 配置好snap就能手动轮播了，主要处理一些自动播放和计算图片宽高 包裹图片的sliderGroup控件的宽度 ，配置了一些props 参数，使用时可以根据需要更改

threshold 滑动可滚动到下一页的阈值
speed 滚动速率

better-scroll 主要处理页面的滑动 ，做轮播图可以使用vue-awesome-swiper 

vue-awesome-swiper轮播图