它是一個純javascript工具，不需要跟其它js庫一起導入，同時兼容jQuery和zepto，壓縮版的大小只有6kb很適合移動端的開發，它的git地址：https://github.com/thebird/swipe

在git上對其的使用方式介紹的相當清楚，關鍵代碼如下

其中.swipe嵌套.swipe-wrap這個html樹模型最好不要改動，至于最里面的div可以更換其他，如li 等

僅僅只需要上訴的幾段代碼即可完成輪播圖的制作，但是在實際的項目中，特別是在首頁頂部的banner上還需要加入page的索引，還需要對控件的參數進行配置，它的主要參數配置如下：

startSlide Integer (default:0) - 開始滾動的位置

speed Integer (default:300) - 動畫滾動的間隔（秒數）

auto Integer - 開始自動幻燈片（以毫秒為單位幻燈片之間的時間）

continuous Boolean (default:true) - 創建一個無限的循環（當滑動到所有動畫結束時是否循環滑動）

disableScroll Boolean (default:false) - 當滾動滾動條時是否停止幻燈片滾動

stopPropagation Boolean (default:false) - 是否停止事件冒泡

callback Function - 幻燈片運行中的回調函數

transitionEnd Function - 動畫運行結束的回調函數

而他的主要api函數如下：

prev()：上一頁

next()：下一頁

getPos()：獲取當前頁的索引

getNumSlides()：獲取所有項的個數

slide(index, duration)：滑動方法

以下是偶在項目中的實際運用的代碼

zepto中的swipeUp，swipeDown不起效果

我正在看zepto，然后看到里面一些事件的時候發現一個問題：

在移動端swipeUp，swipeDown不起效果，另外幾個有效，是怎么回事呢？

解決方案一：

zepto要引入 touch.js模塊 官網上是沒有的 去github下載 然后引入 touch.js即可

解決方案二：

是因為阻止了瀏覽器默認的下拉事件，加上下面一段代碼。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com