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

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

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

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

[list]
[*] 移动端用户行为习惯区别(移动端多的是touch 事件,更注重手指与触摸屏的互动)
[*] 移动端屏幕(移动的屏幕大多小于PC端,为了在更小的屏幕展示同样的内容,内容滑动已然成为用户操作习惯)
[*] 移动端多设备性(ipad、iphone、android phone、android pad,以及这些设备的横竖屏状态)
[*] 移动设备的更新换代的速度,以及手机浏览器厂商对标准支持的跟进,包括统一的webkit 核心的浏览器
[/list]
那么iSlider 的出现,解决了什么问题呢?解决的根本问题是内容的分屏显示,通过滑动操作来表示上一页内容或是下一页内容。而iSlider 是用最优雅的方式去解决,尽可能的节省内存,提高性能。在功能上iSlider 支持:

[list]
[*]图片和dom 两种类型滑动,图片的类型很适合读图类的app,dom 类型则可以根据需要配置成各式各样的webapp
[*]自定义的事件回调,你可以在滑动中,滑动结束,或是滑动开始绑定自己的事件回调
[*]可配置的滑动动画,在获得高性能的同时,你仍然可以指定一些特殊的高级的动画效果来完成你的app,iSlider 提供3d,flip,depth等动画方式来丰富你的滑动效果。
[*]iSlider 会帮你处理好屏幕旋转事件,你只要考虑的是,屏幕旋转后,你的dom 或是 图片改如何显示。
[*]iSlider 还有一些小功能,比如滑动边界递减,自动滑动,垂直水平滑动可配置。
[/list]
而使用iSlider也非常容易上手,你只需要准备一个dom节点用来存放你的slider:
[quote]<div id="canvas"></div>[/quote]
和你需要展示的数据,这里展示的数据分两种类型,拿图片slider 举例,你只需要准备好的是图片的json 数据。数据格式如下:
[code]
{
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"
}]
[/code]
然后就是调用:

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

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

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

欢迎关注我们的项目:iSlider 的项目地址 [url]https://github.com/BE-FE/iSlider[/url]
转载请注明原文出自:[url]http://qbaty.iteye.com/blog/2152674[/url]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值