vue swiper插件使用（滑动事件）

学了那么久的vue，也提升了不少，主要就是要学会看api，去多想，多实践。之前已经能够做到了可以获取到当前滑动到了第几页。那么如果当滑动到当前页的时候又要执行相对应的方法，哪有应该如何做呢？

然后我就又去看swiper-vue的api https://github.com/surmon-china/vue-awesome-swiper  不看例子的直接通向这个网址

 

来一个栗子：

<template>
  <swiper class="swiper" :options="swiperOptions" @click-slide="handleClickSlide">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
    <swiper-slide>Slide 7</swiper-slide>
    <swiper-slide>Slide 8</swiper-slide>
    <swiper-slide>Slide 9</swiper-slide>
    <swiper-slide>Slide 10</swiper-slide>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';

export default {
  name: 'swiper-example-default',
  title: 'Default',
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination'
        }
        // Some Swiper option/callback...
      }
    };
  },
  methods: {
    //滑动点击
    handleClickSlide(index) {
      console.log('Click slide!', index);
    }
  }
};
</script>

<style lang="less" scoped>
.swiper-container {
  height: 400px;
}

.swiper-slide {
  background-color: #fe0000;
  color: #fff;
  font-size: 50px;
  text-align: center;
}
</style>

点击当前页，就可以获取这个当前的第几页。

 

这里还有很多的方法，方法都见文知意，然后自己写下来跑一跑。

项目中还遇到一个问题就是要跳转到指定的页码下，一开始我以为只要修改initialSlide参数就可以了，但是这个initialSlide只能在初始化的时候才能成功，而且只能修改一次。其实这个api中就已经写了如何做到，就是使用swiper中的方法sliderTo

跳转到需要的页面 this.$refs.mySwiper.$swiper.slideTo(3, 1000, false)

栗子就不举了，我写这些就是为了记录下来，方便自己以后查看，或者让别人一起跟我学习。