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

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

在使用 swiper 這個(gè)庫的時(shí)候，一旦設(shè)置 loop:true 的時(shí)候，會(huì)遇到 dom 綁定事件無法觸發(fā)的問題。

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

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

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

click 點(diǎn)擊事件有時(shí)候無任何反應(yīng)，并且這種情況必現(xiàn)

點(diǎn)擊下面的 title，并不能觸發(fā) click 事件，因?yàn)椴]有綁定

html 代碼

  
    
      

        
        
{{banner.title}}
      
    
    

  

js 代碼

new Vue({
  el: "#app",
  data: function () {
    return {
      swiperOption: {     // 輪播配置
        width: window.innerWidth,
        autoplay: {
          delay: 3000
        },
        loop: true,   // 循環(huán)滾動(dòng)
        pagination: {   // 分頁器
          el: ".swiper-pagination"
        },
        preventLinksPropagation: false   // 阻止點(diǎn)擊事件冒泡
      },
      bannerList: [
        {
          id: "1",
          title: "世界杯揭幕戰(zhàn)-超新星1球2助攻俄羅斯5-0沙特 格里茲曼宣布留馬競",
          imgUrl: "http://n.sinaimg.cn/sports/180/w640h340/20180615/AYes-hcyszrz3457297.jpg"
        },
        {
          id: "2",
          title: "顏值滿分！世界杯首日美女球迷盤點(diǎn)",
          imgUrl: "http://n.sinaimg.cn/sports/180/w640h340/20180615/H3Wz-hcyszrz4804003.jpg"
        },
        {
          id: "3",
          title: "盤點(diǎn)歷屆世界杯大比分“屠殺”",
          imgUrl: "http://n.sinaimg.cn/sports/180/w640h340/20180615/FNuk-hcyszrz4805039.jpg"
        }
      ]
    }
  },
  methods: {
    // 坑在這里：
    // 會(huì)發(fā)現(xiàn)有的時(shí)候，click 事件點(diǎn)擊無反應(yīng)，而且這種情況是必現(xiàn)的
    handleClickSlide(index) {
      console.log("handleClickSlide current index", index);
    }
  }
});

解決了上述兩個(gè)問題，但同時(shí)也存在以下幾個(gè)問題

常用的 activeIndex （用來標(biāo)識當(dāng)前點(diǎn)擊的第幾張圖片），但控制臺輸出的值是錯(cuò)亂的

左右作切換的時(shí)候，activeIndex 的值也是錯(cuò)亂的

html 代碼

  
    
      

        
        
{{banner.title}}
      
    
    

  

js 代碼

new Vue({
  el: "#app",
  data: function () {
    return {
      swiperOption: {     // 輪播配置
        width: window.innerWidth,
        autoplay: {
          delay: 3000
        },
        loop: true,   // 循環(huán)滾動(dòng)
        pagination: {   // 分頁器
          el: ".swiper-pagination"
        },
        preventLinksPropagation: false   // 阻止點(diǎn)擊事件冒泡
      },
      bannerList: [
        {
          id: "1",
          title: "世界杯揭幕戰(zhàn)-超新星1球2助攻俄羅斯5-0沙特 格里茲曼宣布留馬競",
          imgUrl: "http://n.sinaimg.cn/sports/180/w640h340/20180615/AYes-hcyszrz3457297.jpg"
        },
        {
          id: "2",
          title: "顏值滿分！世界杯首日美女球迷盤點(diǎn)",
          imgUrl: "http://n.sinaimg.cn/sports/180/w640h340/20180615/H3Wz-hcyszrz4804003.jpg"
        },
        {
          id: "3",
          title: "盤點(diǎn)歷屆世界杯大比分“屠殺”",
          imgUrl: "http://n.sinaimg.cn/sports/180/w640h340/20180615/FNuk-hcyszrz4805039.jpg"
        }
      ]
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  methods: {
    // 坑在這里
    // 一開始點(diǎn)擊第一張圖片，控制臺輸出的 activeIndex 竟然是 1，難道不應(yīng)該是 0嗎？
    // 并且一個(gè)循環(huán)之后，點(diǎn)擊第一張圖片， 控制臺輸出的 activeIndex 竟然變成了 4。。。
    handleClickSlide() {
      // 這個(gè)應(yīng)該是最為想到一個(gè)屬性，用來標(biāo)識當(dāng)前點(diǎn)擊圖片的索引
      const {activeIndex} = this.swiper && this.swiper;
      console.log("handleClickSlide current index", activeIndex);
    }
  }
});

通過 swiper 強(qiáng)大的 api 文檔，解決了上述出現(xiàn)的幾個(gè)問題。關(guān)鍵點(diǎn)在于：當(dāng) loop 設(shè)置為 true 的時(shí)候，不能再用 activeIndex 或者 clickedIndex。只能用 realIndex。官方的解釋為：當(dāng)前活動(dòng)塊的索引，與 activeIndex 不同的是，在 loop 模式下不會(huì)將復(fù)制的塊的數(shù)量計(jì)算在內(nèi)。
點(diǎn)擊事件不能綁定在 dom 上
不過稍不注意，也會(huì)出現(xiàn)新的坑（代碼里有指出）

html代碼

  
    
      

        
        
{{banner.title}}
      
    
    

  

js 代碼

let vm = null;
new Vue({
  el: "#app",
  data: function () {
    return {
      swiperOption: {     // 輪播配置
        width: window.innerWidth,
        autoplay: {
          delay: 3000
        },
        loop: true,   // 循環(huán)滾動(dòng)
        pagination: {   // 分頁器
          el: ".swiper-pagination"
        },
        on: {
          click: function () {
            // 這里有坑
            // 需要注意的是：this 指向的是 swpier 實(shí)例，而不是當(dāng)前的 vue， 因此借助 vm，來調(diào)用 methods 里的方法 
            // console.log(this); // -> Swiper
            // 當(dāng)前活動(dòng)塊的索引，與activeIndex不同的是，在loop模式下不會(huì)將 復(fù)制的塊 的數(shù)量計(jì)算在內(nèi)。           
            const realIndex = this.realIndex;
            vm.handleClickSlide(realIndex); 
          }
        },
        preventLinksPropagation: false   // 阻止點(diǎn)擊事件冒泡
      },
      bannerList: [
        {
          id: "1",
          title: "世界杯揭幕戰(zhàn)-超新星1球2助攻俄羅斯5-0沙特 格里茲曼宣布留馬競",
          imgUrl: "http://n.sinaimg.cn/sports/180/w640h340/20180615/AYes-hcyszrz3457297.jpg"
        },
        {
          id: "2",
          title: "顏值滿分！世界杯首日美女球迷盤點(diǎn)",
          imgUrl: "http://n.sinaimg.cn/sports/180/w640h340/20180615/H3Wz-hcyszrz4804003.jpg"
        },
        {
          id: "3",
          title: "盤點(diǎn)歷屆世界杯大比分“屠殺”",
          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。