vue中用swiper轮播框架loop：true时点击事件失效的解决方法

问题描述：

swiper轮播是可以点击去查看详情的，swiper的loop属性是true，当我们点击第一张图片和向左滑动到最后一张点击时触发不了事件的

原因：

因为swiper的无限轮播时会自动复制第一个和最后一个页面进行轮播。但由于只复制页面没有复制点击事件，此时我们用vue写的点击事件在页面循环一周回来遇到复制的页面时，点击事件就会失效。

解决办法：

在<swiper>中绑定点击事件@click.native,然后在绑定事件中使用this.$refs.mySwiperRef.$swiper.realIndex 获取真实index

@click.native: 给 Vue 组件绑定事件时候，必须加上 native ，否则会认为监听的是来自 Item 组件自定义的事件 等同于在子组件中：子组件内部处理 click 事件然后向外发送 click 事件：$emit("click".fn)

<!--banner Swiper轮播-->
<swiper class="index-banner" :options="swiperOption" @click.native="bannerSwiperClick()" ref="mySwiperRef">
  <swiper-slide v-for="(item,index) in bannerSwiperImg" :key="index">
    <img width="100%" :src="item" alt="">
  </swiper-slide>
  <div class="swiper-pagination" slot="pagination"></div>
</swiper>

methods: {
  bannerSwiperClick(){
    ......
    const index = this.$refs.mySwiper.swiper.realIndex //获取下标
    ......
}