vue-awesome-swiper

聊起轮播就会想到 swiper，作为一个强大的轮播插件，当然有人为 Vue 进行二次封装，那就是 vue-awesome-swiper

使用方法如下

第一步

npm install vue-awesome-swiper --save

第二步

import {

    swiper,

    swiperSlide

} from 'vue-awesome-swiper'

第三步

swiper(:options="swiperOption" ref="mySwiper")

    swiper-slide

    swiper-slide

    swiper-slide

以上这些步骤应该是没有问题的

下面依次介绍如何书写配置项、如何调用 swiper 方法、如何回调

第四步配置项

在 data 的 swiperOption 中写配置项，比如

data() {

    return {

       swiperOption: {

           notNextTick: true,

           direction: 'vertical'

       },

    }

}

上面是很简单的一个示例，其他配置项继续写在 swiperOption 里就可以了

第五步 swiper 方法

computed: {

    swiper() {

         return this.$refs.mySwiper.swiper

    },

}

这里得到了 swiper，可以调用 swiper 方法

比如，有三个按钮，分别对应三个轮播页，点击按钮轮播显示到对应页，这时可以给按钮绑定方法，在 methods 中这样写

clickActiveType(index){

    this.swiper.slideTo(index,300,false)

}

上面主要是展示怎样调用 swiper 方法，其他方法都是类似的

第六步 swiper 回调

swiper4 的文档里面是把回调方法放到 key 为 on 的对象里，但我在使用时是不起作用的，如下所示才可以

swiperOption: {

    ...

    onSlideChangeEnd: (swiper) => {

        console.log(swiper.activeIndex)

    }

}

最初格式如下

swiperOption: {

    ...

    on: {

        onSlideChangeEnd: (swiper) => {

            console.log(swiper.activeIndex)

        }

    }

}

区别就在与是不是放在对象里

其他鼠标滚轮控制轮播播放

swiper4 的 mousewheel 设为 true 不起作用，抱着试试看的想法，将 swiper3 的相应属性 mousewheelControl 设为 true 就可以了

END~~~≥ω≤

巴特西