vue2.0中使用 swiper图片轮播

在Vue2.0中使用swiper进行来展示图片轮播或翻页效果

先 npm  i vue-awesome-swiper

html部分:

<swiper :options="swiperOption"  ref="mySwiper"  class='swipers' @touchEnd="touchEndFunc">

    <swiper-slide v-for="(item,index) in gameList" :key="item.id" :id="item.id">

                </swiper-slide>

              <divclass="swiper-pagination" slot="pagination"></div>

  </swiper>

js部分:

import { swiper, swiperSlide } from 'vue-awesome-swiper'

data({

return{

  swiperOption: {
                autoplayDisableOnInteraction: false,
                //loop:true,
                notNextTick: true,
                centeredSlides: true,
                slidesPerView: 5,
                initialSlide: 2,
                loopedSlides: 2,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: 'click'
                },
                paginationClickable: true,
                prevButton: '.swiper-button-prev',
                nextButton: '.swiper-button-next',
                slideToClickedSlide: true,
                on: {
                    touchEnd: function() {
                        //this.getData();
                    }

                },
                breakpoints: {
                    668: {
                        slidesPerView: 2,
                    }
                }
            }}

})

 computed: {
        swiper() {
            return this.$refs.mySwiper.swiper//引入(好像可以不用这句话)
        }

    },

methods:{

touchEndFunc(data) {
            setTimeout(() => {
                this.checkIndex = this.$refs.mySwiper.swiper.activeIndex;//通过延迟来获取滑动之后的当前index
            }, 300);

        },

}