iSlider 移动端 Webapp 滑动的最优解决方案

转载请注明原文出自：http://qbaty.iteye.com/blog/2152674
这篇文章主要是介绍iSlider 的诞生过程以及什么是iSlider,以及iSlider的未来。
iSlider 的项目地址 https://github.com/BE-FE/iSlider
iSlider 的例子http://be-fe.github.io/iSlider/demo/

如果你觉得喜欢这个项目，或是这个项目能够帮助到你，欢迎来github 给我们 star，这会鼓励我们持续开发出更多fancy 的功能。

移动端与web的环境有很多不同，用户习惯，行为也有很大的差异，而且移动端的浏览器，应用场景和web 端也差别很大。总结一下区别：

• 移动端用户行为习惯区别(移动端多的是touch 事件，更注重手指与触摸屏的互动)
• 移动端屏幕(移动的屏幕大多小于PC端，为了在更小的屏幕展示同样的内容，内容滑动已然成为用户操作习惯)
• 移动端多设备性(ipad、iphone、android phone、android pad，以及这些设备的横竖屏状态)
• 移动设备的更新换代的速度，以及手机浏览器厂商对标准支持的跟进，包括统一的webkit 核心的浏览器

那么iSlider 的出现，解决了什么问题呢？解决的根本问题是内容的分屏显示，通过滑动操作来表示上一页内容或是下一页内容。而iSlider 是用最优雅的方式去解决，尽可能的节省内存，提高性能。在功能上iSlider 支持：

• 图片和dom 两种类型滑动，图片的类型很适合读图类的app，dom 类型则可以根据需要配置成各式各样的webapp
• 自定义的事件回调，你可以在滑动中，滑动结束，或是滑动开始绑定自己的事件回调
• 可配置的滑动动画，在获得高性能的同时，你仍然可以指定一些特殊的高级的动画效果来完成你的app，iSlider 提供3d，flip，depth等动画方式来丰富你的滑动效果。
• iSlider 会帮你处理好屏幕旋转事件，你只要考虑的是，屏幕旋转后，你的dom 或是 图片改如何显示。
• iSlider 还有一些小功能，比如滑动边界递减，自动滑动，垂直水平滑动可配置。

而使用iSlider也非常容易上手，你只需要准备一个dom节点用来存放你的slider：

引用

<div id="canvas"></div>

和你需要展示的数据，这里展示的数据分两种类型，拿图片slider 举例，你只需要准备好的是图片的json 数据。数据格式如下:

{
	height: 475,
	width: 400,
	content: "../public/imgs/1.jpg",
},{
	height: 527,
	width: 400,
	content: "../public/imgs/2.jpg",
},{
 	height: 400,
 	width: 512,
 	content: "../public/imgs/3.jpg",
},{
	height: 400,
	width: 458,
	content:"../public/imgs/5.jpg"
}]

然后就是调用:

new iSlider({
	data: list,
	dom: document.getElementById("canvas"),
	isVertical: true,
	isLooping: true,
	isDebug: true,
	isAutoplay: true,
	animateType: '3d'
});

这样就可以运行一个iSlider 的实例了，关于上面一些参数的意义，可以在官网看到：
http://be-fe.github.io/iSlider/

iSlider 的依赖：iSlider 不依赖任何库或是框架，你可以很轻松的把他用在自己的项目中，不会和zepto 或是jqmobi 冲突。
体积大小：iSlider 压缩后代码2kb，你可以很随意的打包在你的项目。
性能上：iSlider借助了手机硬件加速，所有的动画都尽可能重用dom ，并且使用尽可能少dom 来完成整个渲染，支持无尽的滚动，并且在手指快速滑动中也达到流畅的体验。

欢迎关注我们的项目：iSlider 的项目地址 https://github.com/BE-FE/iSlider
转载请注明原文出自：http://qbaty.iteye.com/blog/2152674

评论

1 楼 calatustela 2015-03-29  

请教一下，如果需要对滑动的页面使用超链接该怎么做？
例如点击每个图片的时候能够链接到一个URI。而华东的时候只是切换图片