13、vue2.0利用better-scroll实现轮播图可以自动轮播可以无限循环轮播

1.安装better-scroll

在根目录中package.json的dependencies中添加：

"better-scroll": "^0.2.4",

然后npm install 安装

2.封装代码slider

<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"></span>            </div>        </div>    </div></template><script>    import BScroll from 'better-scroll'    export default {        props: {            loop: {                type: Boolean,                default: true,            },            autoPlay: {                type: Boolean,                default: true,            },            interval: {                type: Number,                default: 1000            }        },        data() {            return {                dots:[],                currentPageIndex:0            }        },        mounted() {            this.setSliderWidth(); //设置轮播图的宽度            this.init();            if(this.autoPlay) {                this.play();            }        },        methods: {            setSliderWidth() {                this.children = this.$refs.slideGroup.children;                this.dots = new Array(this.children.length)                let width =0;                let sliderWidth = this.$refs.slider.clientWidth;                for(let i = 0; i < this.children.length; i ++){                    width += sliderWidth;                }                if(this.loop){                    width += 2*sliderWidth;                }                this.$refs.slideGroup.style.width = width + 'px';            },            init(){                var vm = this;                // 实例化scroll                this.scroll = new BScroll(this.$refs.slider, {                    scrollX: true,                    scrollY: false,                    momentum: false,   //关闭或者打开惯性运动的执行                    snap: true,       //隔断（翻页）                    snapLoop: this.loop,   //无限滚动                    snapThreshold: 0,                    snapSpeed: 400,   //滑动的时间                })                this.scroll.on('scrollEnd', () => {                    let pageIndex = this.scroll.getCurrentPage().pageX                    if(this.loop){                        pageIndex -= 1;                    }                    this.currentPageIndex = pageIndex;                    if(vm.autoPlay) {                        vm.play();                    }                })                this.scroll.on('beforeScrollStart', () => {                    if(vm.autoPlay){                        clearTimeout(vm.timer);                    }                })            },            play() {                let pageIndex = this.currentPageIndex + 1                if (this.loop) {                    pageIndex += 1                }                var vm = this;                this.timer = setTimeout(() => {                    vm.scroll.goToPage(pageIndex, 0 , 400);//跳转到的页数 初始化页数 滑动总时间                },vm.interval)            }        }    }</script><style lang='less'>    .slide{        width: 100%;        overflow: hidden;        height: 150px;        position: relative;    }    .slide-group{        height: 150px;        background: red;        .slider-item{            width:100vw;            height: 150px;            background: yellowgreen;            float: left;            &:nth-type-of(1){                background: red;            }        }    }    .dots{        position: absolute;        left: 0;        right: 0;        bottom: 10px;        text-align: center;        .dot{            background: rgba(255,255,255,.5);            display: inline-block;            margin: 0 4px;            height: 8px;            width: 8px;            border-radius: 50%;            &.dotActive{                width: 20px;                border-radius: 5px;                background: rgba(255,255,255,0.8);            }        }    }</style>

3、引用的组件

<template>    <div class="recommed">        <slide :loop = 'loop' :autoPlay='autoPlay'>            <div class="slider-item">11</div>            <div class="slider-item">22</div>            <div class="slider-item">33</div>            <div class="slider-item">444</div>        </slide>    </div></template><script>    import Slide from '@/components/slide.vue'    export default {        name:'recommend',        components:{            Slide        },        data (){            return {                loop:true,                autoPlay:true,            }        }    }</script>