摘要：第一版這是最常規的做法，把事件綁定在上。阻止點擊事件冒泡世界杯揭幕戰超新星球助攻俄羅斯沙特格里茲曼宣布留馬競顏值滿分世界杯首日美女球迷盤點盤點歷屆世界杯大比分屠殺希望借此可以幫助遇到此問題的小伙伴，祝大家的生活中再無。

對于 swiper，只要做過輪播圖的童鞋應該都再熟悉不過了。這是一個很強大的圖片輪播插件，本身無任何第三方庫依賴，即插即用。api 文檔很清晰，所以很快能夠上手。但是，再好的插件也會出現令人不愉快的地方，當然，今天所討論的并不是插件本身的問題，只是開發者是按照常規做法去使用，而恰好此時出現了令人費解的問題。

在使用 swiper 這個庫的時候，一旦設置 loop:true 的時候，會遇到 dom 綁定事件無法觸發的問題。

● vuejs 2.5.16
● swiper 4.3.3
● vue-awesome-swiper 3.1.3

下面來說說我是怎么一步一步采坑并最終解決這個問題的。這里只貼出關鍵性的代碼片段。

這是最常規的做法，把 click 事件綁定在 dom 上。但有兩點不足之處:

click 點擊事件有時候無任何反應，并且這種情況必現

點擊下面的 title，并不能觸發 click 事件，因為并沒有綁定

html 代碼

  
    
      

        
        
{{banner.title}}
      
    
    

  

js 代碼

new Vue({
  el: "#app",
  data: function () {
    return {
      swiperOption: {     // 輪播配置
        width: window.innerWidth,
        autoplay: {
          delay: 3000
        },
        loop: true,   // 循環滾動
        pagination: {   // 分頁器
          el: ".swiper-pagination"
        },
        preventLinksPropagation: false   // 阻止點擊事件冒泡
      },
      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"
        }
      ]
    }
  },
  methods: {
    // 坑在這里：
    // 會發現有的時候，click 事件點擊無反應，而且這種情況是必現的
    handleClickSlide(index) {
      console.log("handleClickSlide current index", index);
    }
  }
});

解決了上述兩個問題，但同時也存在以下幾個問題

常用的 activeIndex （用來標識當前點擊的第幾張圖片），但控制臺輸出的值是錯亂的

左右作切換的時候，activeIndex 的值也是錯亂的

html 代碼

  
    
      

        
        
{{banner.title}}
      
    
    

  

js 代碼

new Vue({
  el: "#app",
  data: function () {
    return {
      swiperOption: {     // 輪播配置
        width: window.innerWidth,
        autoplay: {
          delay: 3000
        },
        loop: true,   // 循環滾動
        pagination: {   // 分頁器
          el: ".swiper-pagination"
        },
        preventLinksPropagation: false   // 阻止點擊事件冒泡
      },
      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;
    }
  },
  methods: {
    // 坑在這里
    // 一開始點擊第一張圖片，控制臺輸出的 activeIndex 竟然是 1，難道不應該是 0嗎？
    // 并且一個循環之后，點擊第一張圖片， 控制臺輸出的 activeIndex 竟然變成了 4。。。
    handleClickSlide() {
      // 這個應該是最為想到一個屬性，用來標識當前點擊圖片的索引
      const {activeIndex} = this.swiper && this.swiper;
      console.log("handleClickSlide current index", activeIndex);
    }
  }
});

通過 swiper 強大的 api 文檔，解決了上述出現的幾個問題。關鍵點在于：當 loop 設置為 true 的時候，不能再用 activeIndex 或者 clickedIndex。只能用 realIndex。官方的解釋為：當前活動塊的索引，與 activeIndex 不同的是，在 loop 模式下不會將復制的塊的數量計算在內。
點擊事件不能綁定在 dom 上
不過稍不注意，也會出現新的坑（代碼里有指出）

html代碼

  
    
      

        
        
{{banner.title}}
      
    
    

  

js 代碼

let vm = null;
new Vue({
  el: "#app",
  data: function () {
    return {
      swiperOption: {     // 輪播配置
        width: window.innerWidth,
        autoplay: {
          delay: 3000
        },
        loop: true,   // 循環滾動
        pagination: {   // 分頁器
          el: ".swiper-pagination"
        },
        on: {
          click: function () {
            // 這里有坑
            // 需要注意的是：this 指向的是 swpier 實例，而不是當前的 vue， 因此借助 vm，來調用 methods 里的方法 
            // console.log(this); // -> Swiper
            // 當前活動塊的索引，與activeIndex不同的是，在loop模式下不會將 復制的塊 的數量計算在內。           
            const realIndex = this.realIndex;
            vm.handleClickSlide(realIndex); 
          }
        },
        preventLinksPropagation: false   // 阻止點擊事件冒泡
      },
      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("handleClickSlide current index", index);
    }
  }
});

希望借此可以幫助遇到此問題的小伙伴，祝大家的生活中再無 bug。