3、 vue-awesome-swiper实现点击事件

在 loop 开启的时候，dom 绑定事件是有问题的。因为在loop模式下slides前后会复制若干个slide，从而形成一个环路，但是却不会复制绑定在dom上的click事件。
因此只能使用 swiper 提供的 api 方法进行解决。

在 swiperOption 里，定义一个 click 事件，具体代码如下：
html 代码片段

<swiper :options="swiperOption" ref="mySwiper">
  <swiper-slide
    v-for="(banner, index) in bannerList"
    :key="banner.id">
    <div class="banner-item">
      <img :src="banner.imgUrl" alt="news">
      <p>{{banner.title}}</p>
    </div>
  </swiper-slide>
  <div class="swiper-pagination" slot="pagination"></div>
</swiper>

js 代码片段

let vm = null;
new Vue({
    data: function() {
     return {
         swiperOption: {     // 轮播配置
              loop: true,   // 循环滚动
              on: {
                click: function () {
                  // 这里有坑，需要注意的是：this 指向的是 swpier 实例，而不是当前的 vue， 因此借助 vm，来调用 methods 里的方法 
                  // console.log(this); // -> Swiper
                  // 当前活动块的索引，与activeIndex不同的是，在loop模式下不会将 复制的块 的数量计算在内。
                  const realIndex = this.realIndex;
                  vm.handleClickSlide(realIndex);
                }
              }
            }
         },
         bannerList: [
          {
           id: '1',
           title: '世界杯揭幕战-超新星1球2助攻俄罗斯5-0沙特 格里兹曼宣布留马竞',
           imgUrl: 'http://n.sinaimg.cn/sports/180/w640h340/20180615/AYes-hcyszrz3457297.jpg'
          },
          {
            id: '2',
            title: '颜值满分！世界杯首日美女球迷盘点',
            imgUrl: 'http://n.sinaimg.cn/sports/180/w640h340/20180615/H3Wz-hcyszrz4804003.jpg'
          },
          {
            id: '3',
            title: '盘点历届世界杯大比分“屠杀”',
            imgUrl: 'http://n.sinaimg.cn/sports/180/w640h340/20180615/FNuk-hcyszrz4805039.jpg'
          }
        ]  
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper;
      }
    },
    created() {
        vm = this;
    },
    methods: {
       handleClickSlide(index) {
           console.log('当前点击索引：'， index);
       } 
    }
})