vue-awesome-swiper 的 使用

1、确保 package.json文件中有  "vue-awesome-swiper": "^3.1.3"，没有的话install下

2、在main.js配置

　　import VueAwesomeSwiper from 'vue-awesome-swiper'

　　import 'swiper/dist/css/swiper.css' //（如果你使用的是2.6.0以上的版本要自己手动去加载css）

　　Vue.use(VueAwesomeSwiper)

3、组件中

<div class="swiper-box">
    <!-- swiper -->
    <swiper :options="swiperOption" ref="swiperUl">
        <swiper-slide v-for="(item, index) in dataList" :key="item.id" :class="{current: isIndex == index}">
            <a @click="swiperTo(item,index)"><span>{{item.saleCatgName}}</span></a>
        </swiper-slide>
    </swiper>
</div>

　　

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

methods:{
　　　　　　　swiperTo(item, index) {
                this.mySwiper.slideTo(index - 1, 1000, false);
                this.clickedSlide(this.mySwiper, index)
            },
            clickedSlide(swiper, clickedIndex) {
                for (let i = 0; i < swiper.slides.length; i++) {
                    if (i === clickedIndex) {
                        swiper.slides[i].className = swiper.slides[i].className.replace(/ current/g, '')
                        swiper.slides[i].className += ' current'
                    } else {
                        swiper.slides[i].className = swiper.slides[i].className.replace(/ current/g, '')
                    }
                }
            }
}