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);

        },

}