基於zepto.js的移動端H5單頁面跟隨手指滑動切換控件pageSlider
原文地址:https://github.com/Franslee/pageSlider
PageSlider
PageSlider 是一個基於zepto.js用於實現H5單頁面跟隨手指上下滑動切換的組件,支持通過transform3D啓動GPU加速,目前僅支持移動端touch設備。
在手機上查看效果
用法
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組件時,支持傳入一個參數,用於配置組件功能
PageSlider.case(optOrIndex);
- 參數optOrIndex可以是一個數字(number),用於設置初始顯示的頁碼
- 參數optOrIndex也可以是一個json對象,允許的keys見下表
key | 類型 | 默認值 | 描述 |
---|---|---|---|
startPage | number | 1 | 初始化時顯示頁面的頁碼 |
range | number | 70 | 頁面回彈的最大距離(像素),小於該值頁面回彈,超過該值頁面將切換 |
duration | number | 200 | 頁面回彈動畫持續的時間(毫秒) |
loop | boolean | false | 是否循環切換 |
elastic | boolean | true | 位於頂部(底部)時,是否依然可以向上(向下)拉動 |
translate3d | boolean | true | 是否使用translate3d(在支持translate3d的設備上),使用translate3d會使一些設備開啓GPU加速,滑動更流暢 |
callback | object | {} | 頁面切換回調函數集合。該json對象每個鍵爲一個數值,對應一個頁碼,值爲一個function,滑動到該頁面時觸發。如:{2:function(){alert('滑動到了第二頁');},4:function(){alert('滑動到了第四頁');}} 滑動到第二和第四頁時將觸發對應的回調函數 |
PageSlider.case({loop:true});
切換到指定頁面
在頁面初始化後,可調用組件的go方法跳轉到指定頁面。
//PageSlider初始化
var pageSlider = PageSlider.case();
//跳轉到第3頁
pageSlider.go(3);