文档章节

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

漆昱恒
 漆昱恒
发布于 2014/11/13 11:39
字数 1058
阅读 135
收藏 2

iSlider是一个表现出众,无任何依赖的mobile设备滑动组件。
iSlider 的项目地址 https://github.com/BE-FE/iSlider
iSlider 的例子http://be-fe.github.io/iSlider/demo/

3ab65a2d68df3b369009b86acc9ae69d

如果你身旁有手机,不妨扫一下看看我们炫酷的例子:

17bcfb24c811c39ed58f79d87319a97b

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

取名叫 iSlider 是为了像iScroll致敬,iSlider是移动的滑动组件的最佳解决方案。在WEB 轮播图已经变得小儿科的现在,很多人会质疑重新写个移动端的价值?其实移动端与web的环境有很多不同,用户习惯,行为也有很大的差异,而且移动端的浏览器,应用场景和web 端也差别很大。总结一下区别:

  • 移动端用户行为习惯区别(移动端多的是touch 事件,更注重手指与触摸屏的互动)

  • 移动端屏幕(移动的屏幕大多小于C端,为了在更小的屏幕展示同样的内容,内容滑动已然成为用户操作习惯)

  • 移动端多设备性(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 数据,数据格式如下:

var list = [{
  height: 475,
  width: 400,
  content: "../public/imgs/1.jpg",
},{
  height: 527,
  width: 400,
  content: "../public/imgs/2.jpg",
},{
  height: 374,
  width: 600,
  content:"../public/imgs/9.jpg"
}];

调用时候,需要对iSlider 实例化:

islider = new iSlider({
  data: list,
  dom: document.getElementById("iSlider-wrapper"),
  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 还会持续开发,预计会更丰富对dom 类型的支持,方便开发者用iSlider 来build 自己的 app。对图形类型也将支持放大缩小。iSlider目前的版本是 1.0-beta ,预计这些功能会在下一个版本加上。


© 著作权归作者所有

漆昱恒
粉丝 5
博文 1
码字总数 1058
作品 1
海淀
高级程序员
私信 提问
快来体验我开发的app!一次搞定苹果、安卓、Web端

(以下内容全部由开发者提供;我们在OSChina发布前已取得开发者本人同意) 是不是觉得很帅?欢迎"勾搭"^_^ 开发者 长春鱼熊企业管理咨询有限公司 联系人: 刘文生 联系QQ: 67550351 网址:www...

WeX5移动开发云
2015/07/21
0
0
专注于移动端的滑动解决方案--iSlider

iSlider 是个非常平滑的滑块,支持移动端 WebApp,HTML5App 和混合型的 App。 iSlider是移动端的滑动组件的最佳解决方案。他和普通的web 端的滑动插件有很大不同,面向的用户和解决的问题也有...

叶秀兰
2014/11/06
16.3K
2
现有公司开源软件列表

Facebook Flow Facebook Conceal Facebook Proxygen Facebook Torch7 Facebook osquery Facebook Stetho Google Pie Noon Google GRR Google Blockly Google MR4C Google Kythe Google PerfK......

叶秀兰
2015/03/02
4
0
【webapp的优化整理】要做移动前端优化的朋友进来看看吧

单页or多页 本文仅代表个人观点,不足请见谅,欢迎赐教。 webapp 小钗从事单页相关的开发一年有余,期间无比的推崇webapp的网站模式,也整理了很多移动开发的知识点,但是现在回过头来看,w...

范大脚脚
2017/11/17
0
0
【webapp的优化整理】要做移动前端优化的朋友进来看看吧

webapp 小钗从事单页相关的开发一年有余,期间无比的推崇webapp的网站模式,也整理了很多移动开发的知识点,但是现在回过头来看,webapp究竟是好还是不好真是一言难尽哟! webapp使用JavaScr...

wecloudnet
2016/07/19
38
0

没有更多内容

加载失败,请刷新页面

加载更多

java 面试知识点笔记(十一)多线程与并发-原理 中篇

自适应自旋锁:(java6引入,jvm对锁的预测会越来越精准,jvm也会越来越聪明) 自选次数不再固定 由前一次在同一个锁上的自旋时间及锁拥有者的状态来决定(如果在同一个锁对象上自旋等待刚刚成...

断风格男丶
16分钟前
1
0
Rainbond 5.1.4发布,复杂微服务架构整体升级和回滚

Rainbond 5.1.4发布, 复杂微服务架构整体升级和回滚 今天为大家带来Rainbond 5.1系列第四个更新版本,本次版本更新的主要内容是复杂微服务架构应用整体升级和回滚,能实现复杂微服务架构的持...

好雨云帮
18分钟前
1
0
selenium Python定位元素和相关事件

场景 通过使用selenium python的API能够很好的定位html中的元素,并指挥鼠标进行点击。 定位元素 find_element_by_*方法 find_element_by_id(id_) : html标签中的id确定标签 find_element_b...

亚林瓜子
23分钟前
0
0
apache隐藏版本信息及设置网页缓存

实战:源码编译安装apache及调优技巧 实战环境: 生产环境中,部署了apache之后,我们应该从安全还是性能角度,在apache服务上线之前,对其做诸多的优化调试才行。 技巧1: 安装apache屏蔽a...

寰宇01
37分钟前
1
0
百度小程序第三方接入图片上传demo

代码是基于ThinkPHP 3.2的,其他语言请自行实现,PHP版本为5.6 /*** 图片上传* @Author Qianlong <87498106@qq.com>* @PersonSite http://dev.21ds.cn/*/ public function onlyUpl......

千龍
40分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部