https://github.com/Franslee/pageSlider

移动端H5单页面滑动组件 (a single page slider for mobile web)
https://github.com/Franslee/pageSlider

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/Franslee/pageSlider
• Owner: Franslee
• License: mit
• Created: 2015-03-13T08:29:01.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2015-12-22T04:25:39.000Z (almost 9 years ago)
• Last Synced: 2024-08-03T09:10:51.692Z (4 months ago)
• Language: JavaScript
• Size: 37.1 KB
• Stars: 117
• Watchers: 9
• Forks: 44
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-github-star - pageSlider

README

        
# PageSlider #

 

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

## DEMO ##

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

#![github](http://franslee.github.io/pageSlider/qr-code.png "pageSlider DEMO") 

## 用法 ##

HTML结构

```html

	

	  

	

	

		


		


		


		


	


```

在页面中引入组件所需样式表文件pageSlider.css

```html

```

本组件基于zepto，需要在页面中引入zepto.js文件

```html

```

引入pageSlider.js/pageSlider.min.js文件

```html

```

在页面DOM加载完毕之后，初始化组件

```js

$(function() {

	var pageSlider = PageSlider.case();

});

```

## 设置 settings ##

初始化PageSlider组件时，支持传入一个参数，用于配置组件功能

```js

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('滑动到了第四页');}} 滑动到第二和第四页时将触发对应的回调函数

	

```js

PageSlider.case({loop:true});

```

## 切换到指定页面 ##

在页面初始化后，可调用组件的go方法跳转到指定页面。

```js

//PageSlider初始化

var pageSlider = PageSlider.case();

//跳转到第3页

pageSlider.go(3);

```