JavaScript iSlider—可能是最流畅的移动端滑动组件

xieyu33333 · 2014年11月05日 · 最后由 datty258 回复于 2014年11月06日 · 4170 次阅读

iSlider 是一个专为移动端设计的滑动组件,项目地址:https://github.com/BE-FE/iSlider

iSlider 是我参与的第二个比较正式的开源项目,主要编写了里面的动画部分,滚动图效果在 PC 上早已是个小儿科的问题,也有很多成熟的库可以用。刚听说这个项目的时候,我也觉得有点重复造轮子的感觉,不过后来听了作者的代码分享,感觉这个项目还是非常有价值的,最终我也加入到了代码贡献者的行列中了:

  • 应用场景丰富,在 PC 下,轮播图只是整个网站中的一个小组件,有时甚至可有可无,但是移动端往往会在页面的主要展示上采用滑动效果,尤其是微信深入大家的生活之后更是如此。
  • DOM 元素最小化,一般的轮播图都是有几幅图片,就会在页面中添加几个图片,可能还要包括外层的链接、容器等元素,而目前 iSlider 无论需要多少图片,在页面中永远不超过 3 个<li>容器,这在移动端是非常有意义的,不会出现越滚越卡的情况了。
  • 小而美,压缩后只有 2kb,不依赖任何库或是框架,只针对移动端设计,滑动效果高效流畅。
  • 功能强大,目前包括以下功能: 1. 图片和dom 两种类型滑动,图片的类型很适合读图类的app,dom类型则可以根据需要配置成各式各样的webapp 2. 自定义的事件回调,你可以在滑动中,滑动结束,或是滑动开始绑定自己的事件回调 3. 可配置的滑动动画,在获得高性能的同时,你仍然可以指定一些特殊的高级的动画效果来完成你的app,iSlider 提供3d,flip,depth等动画方式来丰富你的滑动效果。 4. iSlider 会帮你处理好屏幕旋转事件,你只要考虑的是,屏幕旋转后,你的dom 或是 图片改如何显示。 5. iSlider 还有一些小功能,比如滑动边界递减,自动滑动,垂直水平滑动可配置.
    后续我们计划增加手势缩放图片、页面内部 tab 切换等更强大的功能,希望有更多的人来使用,也欢迎大家提交 issues 和 pull request~争取打造最好用的移动端滑动组件。

:plus1: iScroll 写错了吧

#2 楼 @wikimo 汗,写 readme 的时候参照了下 iScroll

@xieyu33333 哈哈,我猜也是这样的

需要 登录 后方可回复, 如果你还没有账号请 注册新账号