swiper.js loop 小坑

swiper.js 是一款強大的插件，也是我最喜歡的開源插件之一。它能夠輕鬆實現輪播、tab 標籤以及各類風騷的頁面滑動效果。

我在本身的不少項目裏都用到了 swiper，配合 vue 使用真的很是方便。不過近日遇到一個小坑，幾番搜索和試驗，才發現與 loop 特性有關。

具體現象是，當 swiper 開啓 loop 屬性實現循環輪播，同時用 vue 的事件綁定語法爲每一個輪播頁綁定事件，當輪播到特定的頁面時綁定的事件沒法被正常監聽。

例以下面的代碼:

<template>
  <div id="app">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-for="i in 2"
          :key="i"
        >Slide {{ i }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.css'

export default {
  name: 'app',

  mounted () {
    const mySwiper = new Swiper('.swiper-container', {
      loop: true
    })

    console.log(mySwiper)
  },

  methods: {
    handleClick (i) {
      console.log(`click slide ${i}`)
    }
  }
}
</script>

這段代碼實際上添加了兩頁輪番，loop = true 會實現循環輪播的效果。但實際使用過程當中發現，Slide1 上綁定的 click 事件監聽，除了初始時第一次顯示時能正常捕獲外，當連續向左滾動以後顯示的 Slide1 頁上點擊就沒效果了。一樣，向右滑動時，Slide2 上綁定的事件監聽器也可能出現問題。

打開調試控制檯查看頁面元素，發現除了實際添加的兩頁輪播對應的 slide 元素以外，左邊多了一個複製的 Slide2 元素，而右邊則多了一個複製的 Slide1。

原來 Swiper 是經過在實際輪播頁先後複製若干個頁面來實現 loop（首尾相連循環滾動）效果的，聯想到前面提到的問題現象，立刻猜想是由於雖然複製了輪播頁元素但 vue 所綁定的事件處理器卻沒有被複制。因而進一步查看了這個元素上綁定的事件監聽器，果真如此。

找到的問題緣由，那也就有頭緒了。Swiper.js 本身其實也提供了一套事件綁定機制，咱們只須要把原代碼裏 vue 指定綁定的事件監聽器經過 Swiper 初始選項中綁定就行了。調整後的代碼以下。

<template>
  <div id="app">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-for="i in 2"
          :key="i"
          :data-index="i"
        >Slide {{ i }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.css'

export default {
  name: 'app',

  mounted () {
    const mySwiper = new Swiper('.swiper-container', {
      loop: true,
      on: {
        click: (e) => {
          const index = e.target.dataset.index
          console.log(`click slide ${index}`)
        }
      }
    })

    console.log(mySwiper)
  }
}
</script>

再次試用點擊事件，一切正常了。