移動端輪播圖滑動外掛-swipe

最近在學習移動端的知識，學習了幾個外掛的使用，swipe和swiper都是移動端觸控滑動類的外掛，使用方便，比自己寫原生或者jQuery要簡單很多，今天先總結一下swipe的基本使用和應用，swiper功能更多更酷炫，改天詳細的總結一下。

swipe官網 github.com/bradbirdsal…

swipe.js是一個輕量級的移動滑動元件，支援觸控移動，支援響應式頁面。

使用方法：

• HTML

<section id="slider" class="swipe">
    <ul class="swipe-wrap">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</section>
複製程式碼

結構有三層，最外層盒子要設定id和class，第二層盒子包裹著要滑動的元素要設定class，最內層就是滑動的元素了，不一定是ul和li，只要結構對了，用div也可以的。

• CSS

.swipe{
    overflow: hidden;
    position: relative;
}
.swipe-wrap{
    over-flow:hidder;
    position:relative;
}
.swipe .swipe-wrap li{
    position: relative;
    float: left;
}
複製程式碼

這裡css中只保留了必須設定的樣式，其他樣式根據自己需要設定就可以了。

• JS中只需要新增一句

var slider = Swipe(document.getElementById('slider')
複製程式碼

就可以實現拖動了！

swipe還提供了一些引數的設定：

var slider = Swipe(document.getElementById('slider'), {
1. startSlide Integer (預設:0) - swipe開始的索引,就是開始滑動的那一頁
2. speed Integer (預設:300) - 頁面過渡的速度
3. auto Integer - 自動滑動 
4. continuous Boolean (預設:true) -是否可以迴圈播放
5. disableScroll Boolean (預設:false) - 停止觸控滑動
6. stopPropagation Boolean (預設:false) -停止事件傳播
7. callback Function - 在成功過渡後執行
8. transitionEnd Function - 在動畫結束後執行
});
複製程式碼

swipe擴充套件了幾個函式，以便於更好的通過指令碼來控制滑動。

prev() 上一頁

next() 下一頁

getPos() 返回當前的索引

getNumSlides() 返回滑塊總數

slide(index, duration) 設定滑到的索引 (duration: 轉化的速度，單位毫秒)
複製程式碼

swipe的問題：

• swipe只提供簡單輪播切換，想要在底部新增圓點顏色切換需要重新寫html（例子中有新增圓點）。
• 用手勢滑動之後，自動滾動就會失效，這時一個bug，需要將swipe.js外掛原始碼進行修改，新增一個判斷：

function stop() {
    var delay = 0;
    delay = options.auto > 0 ? options.auto : 0;
    clearTimeout(interval);
  }
複製程式碼

• 適合簡單的輪播需求，體積小，減少資源消耗。

下面是利用swipe做了兩個小demo

1.模仿攜程移動端，banner部分使用swipe製作輪播效果。

圓點要新增html結構，並且在js中利用callback函式給當前圖對應的圓點加類名；圓點也要新增相應的點選事件。

2.模仿淘寶移動端平臺通知，利用swipe製作了一個可以手勢滑動切換的介面。