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
            }
          }   
        }
      }
    }
  }