前言
之前沒怎麼接觸過移動端，最近工作上要求寫一個H5頁面，用到了 swiper 元件，用的是同事寫的一個，後來看了一下原始碼，覺得有很多值得優化的地方，就站在巨人的肩膀上去優化了一下。由於時間緊迫，仍有很多不足，後續我也會繼續優化。已經把它釋出在 npm 上，歡迎大家 star，如果您願意使用我們的元件，並且有任何問題，可以提 issue， 我們也會盡快解決。
演示
使用方法
import Swiper from 'awesome-react15-swiper';
import 'awesome-react15-swiper/lib/index.css';
let params = {
observer: true,
slideChange: (index) => {
console.log(index);
}
}
<Swiper {...params}>
<div>1</div>
<div>2</div>
<div>3</div>
</Swiper>
複製程式碼原理解析
假設swiper有三張圖片，如下圖所標註的，分別是1，2，3，我們會複製第一張圖，放在最後，即變成了4張圖（原因我待會講）
index代表索引，從0開始- 每張圖左側的
0px，100px，200px，300px代表距離最左側的距離
我們會把 wdt-swiper-wrap 的寬度設定為這4個圖的寬度之和，併為它設定 translation 動畫，動態的去改變 left 屬性，以達到左右切換動畫的效果。left 的大小是通過當前圖片的索引 index 計算得來的，所以我們想要有動畫，只需要動態的設定 activeIndex 即可。
下面要說一下為什麼要複製第一張圖放在最後，因為我們在滑動到第三幅圖的時候，繼續往左滑動，過程中一定會出現右側空白，而我們複製第一張圖放在最後，就可以巧妙的避免了這個問題。那如果我往右滑動，滑動到第一幅圖的時候，繼續右滑，豈不是也會出現空白？這個問題我是這樣解決的，如果是第一張圖右滑，我會把left設定成最後一幅圖（複製第一張圖）的對應的位置，也可以理解成，雖然是第一張圖右滑，其實是在對最後一張圖右滑。所以左滑也可以用同樣的方式處理，這塊程式碼我沒有做修改，是一個優化點。看下圖會很清晰地看到播放原理。
另外，輪播的時候，到最後一張圖，如果直接跳到第二張圖會出現動畫的逆向，所以這個時候應該先取消動畫，然後等到 left 調整後，再開啟動畫。我在程式碼中加入大量註釋，有興趣的話，可以到程式碼中看註釋
Api
| 引數 | 型別 | 預設值 | 說明 |
|---|---|---|---|
| speed | Number | 0.3 |
動畫完成時間，即 transition-duration |
| distance | Number | 50 |
觸控滑動距離小於 distance，則不翻到下一張 |
| autoPlay | Boolean | true |
自動播放 |
| pagination | Boolean | true |
分頁 |
| observer | Boolean | false |
監視器 |
Github
- awesome-react-swiper，期待您的star