better-scroll 实现简单的轮播 无缝滚动~

代码如下：


<template>
    <div class="slide_box">
        <div class="slide" ref="slider">
            <div class="slide-group" ref='slideGroup'>
                <slot>
                </slot>
            </div>
            <div class="dots">
                <span class="dot" :class="{dotActive: (currentPageIndex) === index }" v-for="(item, index) in dots">{{index+1}}</span>
            </div>
        </div>
    </div>
</template>
<script>
    import BScroll from 'better-scroll';
    export default {
        name:"betterScroll",
        props: {
            loop: {
                type: Boolean,
                default: true,
            },
            autoPlay: {
                type: Boolean,
                default: true,
            },
            interval: {
                type: Number,
                default: 1000
            }
        },
        data() {
            return {
                dots:[],
                currentPageIndex:0
            }
        },
        mounted() {
            this.setSliderWidth(); //设置轮播图的宽度
            setTimeout(()=>{
                this._initDots();
                this.init();
                if(this.autoPlay) {
                    this.play();
                }
            },20)
        },
        destroyed() {
            clearTimeout(this.timer);
        },
        methods: {
            setSliderWidth() {
                this.children = this.$refs.slideGroup.children;
                let width = 0;
                let sliderWidth = this.$refs.slider.clientWidth;
                for(let i = 0; i < this.children.length; i ++){
                    this.children[i].style.width = window.screen.width + 'px';
                    width += sliderWidth;
                }
                if(this.loop){
                    width += 2*sliderWidth;
                }
                this.$refs.slideGroup.style.width = width + 'px';// 最长的盒子
            },
            init(){
                let vm = this;
                // 实例化scroll
                this.scroll = new BScroll(this.$refs.slider, {
                    scrollX: true,
                    scrollY: false,
                    momentum: false,   //关闭或者打开惯性运动的执行
                    snap: {
                        loop: this.loop, // 循环
                        threshold: 0.3,
                        speed: 400 // 轮播间隔
                    }
                })
                this.scroll.on('scrollEnd', () => {
                    let pageIndex = this.scroll.getCurrentPage().pageX;
                    this.currentPageIndex = pageIndex;
                    if(vm.autoPlay) {
                        vm.play();
                    }
                })
                this.scroll.on('beforeScrollStart', () => {
                    if(vm.autoPlay){
                        clearTimeout(vm.timer);
                    }
                })

            },
            _initDots() {
                this.dots = new Array(this.children.length)
            },
            play() {
                let vm = this;
                this.timer = setTimeout(() => {
                    vm.scroll.next();
                },vm.interval)
            }
        }
    }
</script>
<style >
    .slide{
         100%;
        overflow: hidden;
        height: 150px;
        position: relative;
    }
    .slide-group{
        height: 150px;
    }
    .slider-item{
        float: left;
        height: 150px;
    }
    .dots{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 10px;
        text-align: center;
    }
    .dot, .dotActive{
        background: yellow;
        display: inline-block;
        margin: 0 4px;
        height: 20px;
         20px;
        border-radius: 50%;
    }
    .dotActive{
        background: red;
    }
</style>