插件描述：PageSlider 是一个基于zepto.js用于实现H5单页面跟随手指上下滑动切换的组件，支持通过transform3D启动GPU加速，目前仅支持移动端touch设备。
请用手机扫描演示页二维码,或pc端浏览器模拟移动端查看效果。
更新时间：2017/10/28 上午11:27:01
更新说明：注：关于大部份网友提出的a标签无法触发跳转的问题
感谢网友 （难得糊涂）提出的解决方案
html
<div class="section sec1" style="background-color:#FFCCCC;"> <div class="to-form-link"><a href="http://www.baidu.com">移动端中向下滑动</a></div> </div>
加入以下js代码即可
<script>
$(".to-form-link>a").on('touchend', function() {
location.replace($(this).attr("href"));
});
</script>用法
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 | boolean | 是否使用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);
PREVIOUS:
NEXT:
相关插件-滚动,拖和放
讨论这个项目（48）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
L2.H 0
2020/2/20 12:08:49
-
上面说表单或者一切事件失效的，这是作者留的坑，我看了下源代码，你们把pageSlider.js里面的所有event.preventDefault();代码注释掉就行了
L0
2020/12/14 17:06:35
-
大神 注释掉会不会出现其他问题？
人质。 0
2018/4/16 22:21:12
-
我现在的需求是 只要第一页有这样的效果 后面的就不要这样的效果 但是下拉时候需要让第一页再回来 怎么实现 大神
j～o～an0
2018/12/10 21:06:53
-
请问你的问题解决了吗 我也遇到了相同的问题 需要和你一样的效果
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
