swiper中的切换事件

swiper中的事件,请参考官方文档,这里需要注意安装的swiper的版本

<HeaderTab
      @toParent="getNowIndex"
      :tabInfo="tabInfo"
      :index="nowIndex"
    >HeaderTab>
    <swiper
      @slide-change-transition-end="handleClickSlide"
      class="swiper"
      id="swiper"
      ref="mySwiper"
      :options="swiperOptions"
    >
      <swiper-slide>
        <TaskList :index="1" state="pending">TaskList>
      swiper-slide>
      <swiper-slide>
        <TaskList :index="2" state="processing">TaskList>
      swiper-slide>
      <swiper-slide>
        <TaskList :index="3" state="finish">TaskList>
      swiper-slide>
      <div class="swiper-pagination" slot="pagination">div>
    swiper>
methods: {
    handleClickSlide() {
      console.log(this.nowIndex);
      this.nowIndex = this.swiper.activeIndex;
    },
    getNowIndex(data) {
      console.log("Current Swiper instance object", data);
      // this.swiper.slideTo(3, 1000, false)
      this.nowIndex = data;
      this.swiper.slideTo(data, 1000, false);
    },
  },

你可能感兴趣的:(vue,前端)