vue-awesome-swiper翻页事件

vue-awesome-swiper提供了多种事件供开发者使用，其中包括翻页事件。下面是一个演示如何使用vue-awesome-swiper的翻页事件的例子：

<template>
  <div>
    <swiper :options="swiperOption" @slideChange="handleSlideChange">
      <swiper-slide v-for="(item, index) in swiperList" :key="index">
        <img :src="item.imgUrl" alt="">
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper';

export default {
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {
        loop: false,
        slidesPerView: '3',
        spaceBetween: 24,
        centeredSlides: false,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      swiperList: [
        { imgUrl: 'image1.jpg' },
        { imgUrl: 'image2.jpg' },
        { imgUrl: 'image3.jpg' }
      ]
    };
  },
  methods: {
    handleSlideChange() {
      // 在这里处理翻页事件
      console.log('翻页事件触发');
    }
  }
};
</script>

在上面的例子中，我们使用了vue-awesome-swiper的`@slideChange`事件来监听翻页事件。当翻页事件触发时，会调用`handleSlideChange`方法进行处理。你可以根据实际需求在`handleSlideChange`方法中编写你的逻辑代码。