vue之better-scroll轮播

想吐槽啊，网上看了那么多文章，写来写去，一大堆，就是一个简单的利用better-scroll来制作的一个轮播效果，搞不明白为啥那么多代码。。。

html：

<template>
  <div class="banner-warpper" ref="banner">
    <div class="banner-group" ref="bannerGroup" >
      <div class="banner-item" :key="item.img" v-for="item in banner"><router-link :to="item.link"><img :src="item.img" ></router-link></div>
    </div>
    <div class="banner-dots" v-show="dots">
      <div class="dots-item" v-for="(item,index) in banner" :key="index" :class="index === actives ? 'active' : ''"></div>
    </div>
  </div>
</template>

js：

<script>
import BScroll from 'better-scroll';
export default {
  name: 'banner',
  props: {
    banner: { // 获取banner列表
      type: Array
    },
    dots: { // 是否显示底部原点
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      actives: 0, // 当前项，展示项
    };
  },
  created () {
    this.setWidth();
  },
  mounted () {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.banner, {
        click: true,
        scrollX: true,
        scrollY: false,
        momentum: false,
        snap: true,
        snapLoop: true,
        snapThreshold: 0,
        snapSpeed: 400
      });
      setInterval(() => { // 这里，这里，这里！就这一个setInterval，解决了banner轮播
        this.actives++; // 每隔2s actives自增1
        if (this.actives >= this.banner.length) { // 判断actives是否大于等于banner长度
          this.actives = 0; // 超过就归0
        }
        this.scroll.goToPage(this.actives, 0, 400); // 滚动到此页面 ，关于goToPage函数请看 Vue之better-scroll
      }, 2000); // 间隔时间：2s
    });
  },
  methods: {
    setWidth () { // 宽度设置，自适应
      const swidth = window.innerWidth;
      this.$nextTick(() => {
        this.$refs.banner.style.width = swidth + 'px';
        this.$refs.bannerGroup.style.width = swidth * this.banner.length + 'px';
        for (let childrenKey of this.$refs.bannerGroup.children) {
          childrenKey.style.width = swidth + 'px';
        }
      });
    }
  }
};
</script>