【react開發】使用swiper插件，loop:true時產生的問題解決方案

這2天上班遇到的問題：react使用swiper3插件實現banner輪播，其中有個banner圖有個click點擊事件，而其他的是頁面跳轉。出現了一個問題：

就是向右滑動到該幀時的swiper，點擊時未觸發react的onClick方法。

因為昨天玩滑板時，手上受了點傷，所以今天沒出去玩了，休息一天。於是正好拿來整理下一個技術點。

這里我們使用簡單案例來說明：

錯誤示范

我們先來看看錯誤代碼（其實理論是正確的）：

組件初始化一個banner數組

render中渲染出輪詢banner，並給每個banner綁定一個onClick事件，傳入參數i

綁定的方法：點擊后執行彈出當前為第幾個banner

使用Swiper對象，初始化為輪播圖。

照理來講，我們分別點擊這個swiper的每個banner應該會彈出1、2、1、2……的

但是實際上：

（點擊1、2兩圖時觸發了，但是點擊第3圖，click方法就沒生效了）

動態圖如下：

我們來分析一下原因吧：

原因

首先，banner只有2個，照理應該是2個swiper-slide，

但是在初始化時使用了loop:true

便由swiper插件再復制生成了2個。因此有了4個：

而新的2個slide是swiper插件生成的，並沒有綁定react的事件，所以點擊之后沒有觸發到事件。

怎么辦呢？其實這樣的效果已經無法完全使用react處理了。因為插件生成的swiper並不是虛擬dom了。

所以這里需要使用到部分的dom操作。然后和react連接起來。

正確示范

來看看解決方案吧

數據一樣，第2圖中，我們在slide中加入一個屬性data-i，這個i就是我們之后要用到方法中參數

我們在初始化之后，給每個slide綁定一個click事件：

點擊后拿到之前綁定的i，表示當前點擊的是第幾個banner，然后再調用組件對象的click方法。

（這里的_this代表當前react組件對象，因為前面聲明了，這樣就又可以從dom操作回到react操作了）

運行實例

現在我們來看看這個案例：

請長按識別二維碼（點擊）打開：