Skip to content

移动端H5单页面滑动组件 (a single page slider for mobile web)

License

Notifications You must be signed in to change notification settings

Franslee/pageSlider

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

PageSlider

PageSlider 是一个基于zepto.js用于实现H5单页面跟随手指上下滑动切换的组件,支持通过transform3D启动GPU加速,目前仅支持移动端touch设备。

DEMO

请用手机扫描以下二维码,在打开的页面上下滑动查看效果
#github

用法

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);

About

移动端H5单页面滑动组件 (a single page slider for mobile web)

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published