iSlider 移动端 Webapp 滑动的最优解决方案
发布在webapp 移动开发2014年11月12日view:4257
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

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

enter image description here

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

enter image description here

如果你觉得喜欢这个项目,或是这个项目能够帮助到你,欢迎来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 ,预计这些功能会在下一个版本加上。

评论
发表评论
3年前
赞了此文章!
3年前
赞了此文章!
3年前

@qbaty 亲,看下云来的liveapp。

3年前

@琅琊丶Janking 亲,不可能,我最标榜的就是流畅。。。

3年前

扫描二维码看了一下,感觉不太流畅,是不是我手机问题?米3原生浏览器

3年前

@一只浪荡不羁的豆尼玛 场景应用动画?能否详细的描述一下?

3年前

很棒的东西,要fork下来改改

    var islider = new iSlider({
    data: picList,
    dom: document.getElementById("iSlider-show"),
    duration: 2000,
       onslidechange: function(idx){
        // do something
        //如果写场景应用动画切换后这里要写多少呀?
        //所以建议作者考虑下,适应潮流
    }
});
WRITTEN BY
PUBLISHED IN
webapp 移动开发

webapp 移动开发

我的收藏