vue-awesome-swiper怎么在同一个Vue页面使用多个swiper?

Question

想要在同一个vue做多个轮播切换，而且想要获得每一个swiper当前所切换到的activeIndex。单个的时候知道怎么获取activeIndex，但是有多个的时候要怎么做？怎么去区分它们？<template><div><swiper  :options="swiperOption" ref="mySwiper"><swiper-slide v-for="(item,index) in listdata" :key="index"> {{item}} </swiper-slide>   </swiper>   </div></template>import 'swiper/dist/css/swiper.css';import { swiper, swiperSlide } from 'vue-awesome-swiper';export default {    components:{        swiper,         swiperSlide    },    data(){       return{             swiperOption: {                pagination: {                    el: '.swiper-pagination'                },                on:{                    slideChangeTransitionEnd:()=>{                        console.log(this.swiper.activeIndex)                        }                     }            },       }     },    computed: {      swiper() {        return this.$refs.mySwiper.swiper;      }    } }   

Answer 1

1.多个时候用用多个options，在你写的slideChangeTransitionEnd事件里获取对应的activeIndex
2.也可以多个的时候多个ref，直接通过ref注册slideChangeEnd事件，在事件里获取activeIndex，看你的swiper版本