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