使用SwipeJS開發移動WebApp小結

Swipe JS 是一個輕量級的移動滑動組件，支持 1:1 的觸摸移動，阻力以及防滑性能都不錯，可讓移動web應用展示更多的內容，能解決咱們對於移動Web對滑動的需求。

官網：http://www.swipejs.com
github：https://github.com/bradbirdsall/Swipe

　　要實現Swipe的滑動和手勢很是簡單，僅須要遵循一個簡單的規則。下面是一個例子：

<div id='slider' class='swipe'>
  <div class='swipe-wrap'>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</div>

　　裏面包裹的三個DIV便是滑動的模塊了，在滑塊結束後面或頁面底部添加事件代碼：

window.mySwipe = Swipe(document.getElementById('slider'));

　　固然添加了事件後咱們還須要添加一些基礎的樣式，以保證滑塊能正常工做：

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

　　到這裏整個滑動效果就製做完成了，趕忙用手機進行測試下吧！

　　Swipe2.0還提供了更多的參數設置：

• startSlide Integer (default:0) - index position Swipe should start at（滑動的索引值,即從*值開始滑動，默認值爲0）

• speed Integer (default:300) - speed of prev and next transitions in milliseconds.（滑動的速度，默認值300毫秒）

• auto Integer - begin with auto slideshow (time in milliseconds between slides)（自動滑動，單位爲毫秒）

• continuous Boolean (default:true) - create an infinite feel with no endpoints（是否循環滑動，默認值爲true）

• disableScroll Boolean (default:false) - stop any touches on this container from scrolling the page（中止任何觸及此容器上滾動頁面，默認值flase）

• stopPropagation Boolean (default:false) - stop event propagation（中止事件傳播,默認值flase）

• callback Function - runs at slide change.（回調函數）

• transitionEnd Function - runs at the end slide transition.（滑動過渡時調用的函數）

舉個帶參數設置的栗子：
<script type="text/javascript">
window.mySwipe = new Swipe(document.getElementById('slider'), {
startSlide: 2,
speed: 400,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
callback: function(index, elem) {},
transitionEnd: function(index, elem) {}
});           
</script>

　　Swipe2.0提供的API

prev() slide to prev（上一頁）

next() slide to next（下一頁）

getPos() returns current slide index position（獲取當前索引位置）

getNumSlides() returns the total amount of slides（獲取全部滑塊總數）

slide(index, duration) slide to set index position (duration: speed of transition in milliseconds)（指數，持續時間）滑動設置索引位置（持續時間：轉型速度以毫秒爲單位）

　　與1.0相比較，2.0作出了不少改進，有更多的API設定，相比各類WebApp開發框架，Swipe也有本身的優缺點，

　　優勢：

滑動與防滑性能很是不錯，用戶體驗較好
Html結構簡單，自定義較靈活

　　缺點：

切換後盒子的高度取決於切換內容最大高度，若是某個盒子無內容，那麼會出現一個空白區域當前選中狀態在滑動結束後才激活混合開發時js代碼較爲繁瑣