vue中使用swiper（獲取當前頁面）

安裝  npm install vue-awesome-swiper --save-dev

官網：https://github.surmon.me/vue-awesome-swiper/

使用前，在main.js加入全局引用

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

官網上有很多的案例，可以找類似的案例並且複製到自己場景中

這邊我就先補充一下簡單的如何獲取到swiper當前的頁面

data() {
      return {
        swiperOption: {
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          },
          on:{
            slideChange:function(){
              console.log(this)
            }
          }
        }
      }
    }

在翻頁的時候可以打印出this，

其實api中也說了，這個數值就是用來獲取到切換的時候，是哪一頁被激活了。

如何將這個值取出來

let vm = this
  export default {
    name: 'swiper-example-navigation',
    title: 'Navigation',
    components: {
      Swiper,
      SwiperSlide
    },
    data() {
      return {
        activeIndex:0,
        swiperOption: {
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          },
          on:{
            slideChange:function(){
              vm.activeIndex = this.activeIndex
            }
          }   
        }
      }
    }
  }