PageSlider
1.0.0
PageSlider是一個用於行動裝置滑幕組件，支援上下滑動，左右滑動，禁止滑動等功能，同時支援AMD 模組化載入方式
HTML：
< div class =" page-wrap " >
< div class =" page " >
< div class =" title " > page one </ div >
< div class =" subtitle " > page one subtitle </ div >
< div class =" arrow " > </ div >
</ div >
< div class =" page " >
< div class =" title " > page two </ div >
< div class =" subtitle " > page two subtitle </ div >
< div class =" arrow " > </ div >
</ div >
< div class =" page " >
< div class =" title " > page three </ div >
< div class =" subtitle " > page three subtitle </ div >
< div class =" arrow " > </ div >
</ div >
< div class =" page " >
< div class =" title " > page four </ div >
< div class =" subtitle " > page four subtitle </ div >
</ div >
</ div >CSS
html , body , . page-wrap {
width : 100 % ;
height : 100 % ;
}
. page {
width : 100 % ;
height : 100 % ;
-webkit-backface-visibility : hidden;
-webkit-perspective : 1000 ;
}由於實現原理的問題，故上面的樣式設定是必需的。
JavaScript
new PageSlider ( {
pages : $ ( '.page-wrap .page' )
} ) ; new PageSlider ( {
pages : $ ( '.page-wrap .page' ) , //必需，需要切换的所有屏
direction : 'vertical' , //可选，vertical 或 v 为上下滑动，horizontal 或 h 为左右滑动，默认为 vertical
currentClass : 'current' , //可选, 当前屏的class (方便实现内容的进场动画)，默认值为 'current'
gestureFollowing : 'false' , //可选，如果为 true，则开启手势跟随模式
hasDot : 'false' , //可选，生成标识点结构，样式自己控制
preventDefault : true , //可选，是否阻止默认行为
rememberLastVisited : true , //可选，记住上一次访问结束后的索引值，可用于实现页面返回后是否回到上次访问的页面
animationPlayOnce : false , //可选，切换页面时，动画只执行一次
dev : false , //可选，开发模式，传入具体页面索引值
oninit : function ( ) { } , //可选，初始化完成时的回调
onbeforechange : function ( ) { } , //可选，开始切换前的回调
onchange : function ( ) { } , //可选，每一屏切换完成时的回调
onSwipeUp : function ( ) { } , //可选，swipeUp 回调
onSwipeDown : function ( ) { } , //可选，swipeDown 回调
onSwipeLeft : function ( ) { } , //可选，swipeLeft 回调
onSwipeRight : function ( ) { } //可选，swipeRight 回调
} ) ; prev()上一屏next()下一屏moveTo(n)跳到第n 屏，有緩動效果moveTo(n, true)直接跳到第n 屏，沒有緩動效果通常，頁面上的元素動畫都是透過樣式來控制，如下：
. current . dom {
-webkit-animation : slideToTop 1 s 0.5 s ease both;
}PageSlider 支援將動畫直接綁定在具體dom 元素上，如下：
< div class =" title " data-animation =' {"name": "slideToTop", "duration": 800, "timing-function": "ease", "fill-mode": "both"} ' >
page two
</ div >
< div class =" subtitle " data-animation =' {"name": "slideToTop", "duration": 800, "delay": 300, "timing-function": "ease", "fill-mode": "both"} ' >
page two subtitle
</ div >PageSlider 最初的滑動較簡單，直接判斷手勢進行翻屏，而有朋友喜歡在touchmove 時能拉動頁面，看到下一屏，此為朋友說的手势跟随。其也因為沒有此功能而放棄使用PageSlider，故新版做了支持，只需要如右設定即可： gestureFollowing: true 。
隨著業務的發展，有時候需要鎖定當前屏，不響應用戶的滑動事件，需要點擊某按鈕或完成某些操作後再自動滑屏。本次更新提供了以下方法進行鎖定：
< div class =" page " data-lock-next =" true " data-lock-prev =" true " > </ div > data-lock-next ： 禁止往後滑data-lock-prev ： 禁止往前滑
有時候，當頁面跳回時，希望能直接回到上次跳走的頁面，而不希望重頭再來，只需如右設定： rememberLastVisited: true ，即會儲存目前頁面索引到localstorage，當回傳時即可方便操作，如下：
new PageSlider ( {
pages : $ ( '.page-wrap .page' ) ,
rememberLastVisited : true ,
oninit : function ( ) {
//返回时，需告诉我们此时为返回动作而不是刷新，可以通过 hash 告诉我们
//PageSlider 所有回调接口 this 指向 PageSlider，方便进行操作
if (返回为 true ) {
this . moveTo ( this . lastVisitedIndex , true ) ;
}
}
} ) ;此為個人習慣，我在開發時，假設在寫第二屏動畫時，我會將第一屏隱藏掉，以方便每次刷新都直接在第二屏，而不需要去滑動。但當我在寫第5 螢幕動畫時，我需要手動隱藏n-1 螢幕。 。 。 。然後此時領導過來說，XXX，來，讓我看一下你做好的效果，然後我又要手動把之前隱藏的顯示，十幾秒後看完我繼續開發又要繼續隱藏。 。 。 。 。人生如此短暫，受不鳥吶。所以，只需要如下操作，即可愉快的開發：
new PageSlider ( {
pages : $ ( '.page-wrap .page' ) ,
dev : 0 //0|1|2|3|...
} ) ;有時候，會有產品的需求希望在頁面往回翻時，就不再執行進場等動畫了，執行過一次就夠了，只需要設定animationPlayOnce: true即可。
new PageSlider ( {
pages : $ ( '.page-wrap .page' ) ,
animationPlayOnce : true
} ) ;這是一個較少見的需求，要求每一頁按固定高度設計，當在小螢幕下，滑動頁面時，不是直接翻頁，而是原生的滾動，當滾動到底部時，再滑動頁面才觸發翻頁，具體效果可先掃描後面對應的二維碼體驗，具體範例程式碼如下：
< div class =" page " style =" -webkit-overflow-scrolling: touch; " >
< div class =" page__inner " style =" position: relative; height: 800px; " >
< div class =" title " > page two </ div >
< div class =" subtitle " > page two subtitle </ div >
< div style =" position: absolute; left: 20px; bottom: 10% " > long page </ div >
< div class =" arrow " > </ div >
</ div >
</ div >在.page元素上設定-webkit-overflow-scrolling: touch;可觸發原生的平滑滾動，讓滾動效果體驗更舒服，不設定也可以，但效果相差很大; 內層需設定一個大於螢幕的高度值，才會觸發此效果，如果不設置，預設是遍歷直接的子元素高度和來跟螢幕高度作比較判斷是否是長內容頁。
有時候，會遇到這樣的需求，頁面有隱藏的一些內容，但需要在第一次向下滑的時候才顯示出來，這時要禁止翻頁，然後交互完成後再滑才是翻頁，這裡提供了一個範例以方便使用者參考，具體請參閱下面example。
看後面需求是否有必要實現以下功能：
字符串bug
