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

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

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

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

這裏咱們使用簡單案例來講明：

錯誤示範

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

組件初始化一個banner數組

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

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

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

照理來說，咱們分別點擊這個swiper的每一個banner應該會彈出一、二、一、2……的

可是實際上：

（點擊一、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操做了）

運行實例

如今咱們來看看這個案例：

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