vue-awesome-swiper

本文地址：https://www.cnblogs.com/veinyin/p/9370113.html 

聊起轮播就会想到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

　　

第四步

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

data() {
    return {            
       swiperOption: {
           notNextTick: true,
           direction: 'vertical'
       },
    }
}

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

第五步

computed: {
    swiper() {
         return this.$refs.mySwiper.swiper
    },        
}

这里得到了swiper，可以调用其中的一些方法

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

clickActiveType(index){
    this.swiper.slideTo(index,300,false)
}

　　

待续