iSlider—可能是最流暢的移動端滑動組件

xiangchaobin 發(fā)布于2019-08-21 10:21 / 557人閱讀

摘要：還有一些小功能，比如滑動邊界遞減，自動滑動，垂直水平滑動可配置后續(xù)我們計劃增加手勢縮放圖片頁面內(nèi)部切換等更強大的功能，希望有更多的人來使用，也歡迎大家提交和爭取打造最好用的移動端滑動組件。

iSlider是一個專為移動端設(shè)計的滑動組件，項目地址: https://github.com/BE-FE/iSlider

iSlider是我參與的第二個比較正式的開源項目，主要編寫了里面的動畫部分，滾動圖效果在PC上早已是個小兒科的問題，也有很多成熟的庫可以用。剛聽說這個項目的時候，我也覺得有點重復造輪子的感覺，不過后來聽了作者的代碼分享，感覺這個項目還是非常有價值的，最終我也加入到了代碼貢獻者的行列中了：

應(yīng)用場景豐富，在PC下，輪播圖只是整個網(wǎng)站中的一個小組件，有時甚至可有可無，但是移動端往往會在頁面的主要展示上采用滑動效果，尤其是微信深入大家的生活之后更是如此。
DOM元素最小化，一般的輪播圖都是有幾幅圖片，就會在頁面中添加幾個圖片，可能還要包括外層的鏈接、容器等元素，而目前iSlider無論需要多少圖片，在頁面中永遠不超過3個

容器，這在移動端是非常有意義的，不會出現(xiàn)越滾越卡的情況了。
小而美，壓縮后只有2kb，不依賴任何庫或是框架，只針對移動端設(shè)計，滑動效果高效流暢。
功能強大，目前包括以下功能：

1. 圖片和dom 兩種類型滑動，圖片的類型很適合讀圖類的app，dom類型則可以根據(jù)需要配置成各式各樣的webapp
2. 自定義的事件回調(diào)，你可以在滑動中，滑動結(jié)束，或是滑動開始綁定自己的事件回調(diào)
3. 可配置的滑動動畫，在獲得高性能的同時，你仍然可以指定一些特殊的高級的動畫效果來完成你的app，iSlider 提供3d，flip，depth等動畫方式來豐富你的滑動效果。
4. iSlider 會幫你處理好屏幕旋轉(zhuǎn)事件，你只要考慮的是，屏幕旋轉(zhuǎn)后，你的dom 或是 圖片改如何顯示。
5. iSlider 還有一些小功能，比如滑動邊界遞減，自動滑動，垂直水平滑動可配置.

后續(xù)我們計劃增加手勢縮放圖片、頁面內(nèi)部tab切換等更強大的功能，希望有更多的人來使用，也歡迎大家提交issues和pull request~爭取打造最好用的移動端滑動組件。