插件描述：PageSlider 是一個基于zepto.js用于實現(xiàn)H5單頁面跟隨手指上下滑動切換的組件，支持通過transform3D啟動GPU加速，目前僅支持移動端touch設備。
請用手機掃描演示頁二維碼,或pc端瀏覽器模擬移動端查看效果。
HTML結構
<!DOCTYPE html> <html> <head> <!-- styles, scripts, etc --> </head> <body> <div class="section sec1"></div> <div class="section sec2"></div> <div class="section sec3"></div> <div class="section sec4"></div> </body> </html>
在頁面中引入組件所需樣式表文件pageSlider.css
<link rel="stylesheet" href="../dist/pageSlider.css">
本組件基于zepto，需要在頁面中引入zepto.js文件
<script src='http://cdn.bootcss.com/zepto/1.1.4/zepto.min.js'></script>
引入pageSlider.js/pageSlider.min.js文件
<script src='../dist/pageSlider.js'></script>
在頁面DOM加載完畢之后，初始化組件
$(function() { var pageSlider = PageSlider.case(); });
設置 settings
初始化PageSlider組件時，支持傳入一個參數(shù)，用于配置組件功能
PageSlider.case(optOrIndex);參數(shù)optOrIndex可以是一個數(shù)字(number),用于設置初始顯示的頁碼
參數(shù)optOrIndex也可以是一個json對象，允許的keys見下表
| key | 類型 | 默認值 | 描述 |
| startPage | number | 1 | 初始化時顯示頁面的頁碼 |
| range | number | 70 | 頁面回彈的最大距離(像素)，小于該值頁面回彈，超過該值頁面將切換 |
| duration | number | 200 | 頁面回彈動畫持續(xù)的時間(毫秒) |
| loop | boolean | false | 是否循環(huán)切換 |
| elastic | boolean | true | 位于頂部(底部)時，是否依然可以向上(向下)拉動 |
| translate3d | boolean | boolean | 是否使用translate3d(在支持translate3d的設備上)，使用translate3d會使一些設備開啟GPU加速，滑動更流暢 |
| callback | object | {} | 頁面切換回調函數(shù)集合。該json對象每個鍵為一個數(shù)值，對應一個頁碼，值為一個function,滑動到該頁面時觸發(fā)。如：{2:function(){alert('滑動到了第二頁');},4:function(){alert('滑動到了第四頁');}} 滑動到第二和第四頁時將觸發(fā)對應的回調函數(shù) |
PageSlider.case({loop:true});
在頁面初始化后，可調用組件的go方法跳轉到指定頁面。
//PageSlider初始化 var pageSlider = PageSlider.case(); //跳轉到第3頁 pageSlider.go(3);
程序員人生，我編程，我富裕，記住wfuyu網(wǎng)，php教程，php學習，php手冊，CMS模版制作
聲明：本站大部分內容是作者原創(chuàng)，少部分收集于互聯(lián)網(wǎng)供大家一起學習，原版權很多不明，如有侵權請聯(lián)系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有
