资讯专栏INFORMATION COLUMN

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

xiangchaobin / 456人阅读

摘要:还有一些小功能,比如滑动边界递减,自动滑动,垂直水平滑动可配置后续我们计划增加手势缩放图片页面内部切换等更强大的功能,希望有更多的人来使用,也欢迎大家提交和争取打造最好用的移动端滑动组件。

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

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

应用场景丰富,在PC下,轮播图只是整个网站中的一个小组件,有时甚至可有可无,但是移动端往往会在页面的主要展示上采用滑动效果,尤其是微信深入大家的生活之后更是如此。
DOM元素最小化,一般的轮播图都是有几幅图片,就会在页面中添加几个图片,可能还要包括外层的链接、容器等元素,而目前iSlider无论需要多少图片,在页面中永远不超过3个

容器,这在移动端是非常有意义的,不会出现越滚越卡的情况了。
小而美,压缩后只有2kb,不依赖任何库或是框架,只针对移动端设计,滑动效果高效流畅。
功能强大,目前包括以下功能:

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

后续我们计划增加手势缩放图片、页面内部tab切换等更强大的功能,希望有更多的人来使用,也欢迎大家提交issues和pull request~争取打造最好用的移动端滑动组件。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/85383.html

相关文章

  • 常用插件、工具类库汇总(上)

    摘要:函数库动画库动画库,也是目前最通用的动画库。下拉框级联选择器移动端最好用的的筛选器组件联动筛选移动端最好用的的筛选器组件联动筛选颜色选择器时间选择器时间日期处理是一个解析,验证,操作和显示日期和时间的类库。 showImg(https://segmentfault.com/img/bVbjpHt?w=900&h=383); 前言 在开发中,我们经常会将一些常用的代码块、功能块进行封装,...

    txgcwm 评论0 收藏0
  • 常用插件、工具类库汇总

    摘要:页面调试腾讯开发维护的代码调试发布,错误监控上报,用户问题定位。同样是由腾讯开发维护的代码调试工具,是针对移动端的调试工具。前端业务代码工具库。动画库动画库,也是目前通用的动画库。 本人微信公众号:前端修炼之路,欢迎关注 本篇文章整理自己使用过的和看到过的一些插件和工具,方便日后自己查找和使用。 另外,感谢白小明,文中很多的工具来源于此。 弹出框 layer:http://layer....

    GitCafe 评论0 收藏0
  • HTML5 活动宣传页「My Flyme 独家记忆」开发实践总结

    摘要:年前放假的最后一天,我们上线了独家记忆活动宣传页。微信分享主要代码参考独家记忆当时光凝固,当回忆定格。这是属于我和的独家记忆。 年前放假的最后一天,我们上线了「My Flyme 独家记忆」 H5 活动宣传页。 因种种原因,直到放假前几天,才突然要求我们参与并开始项目的前端部分。此时大概的情况是:所有数据已计算完毕;后端接口已完成待联调;交互视觉只出了不到四分之一(一共二十多个页面);我...

    Anonymous1 评论0 收藏0
  • HTML5 活动宣传页「My Flyme 独家记忆」开发实践总结

    摘要:年前放假的最后一天,我们上线了独家记忆活动宣传页。微信分享主要代码参考独家记忆当时光凝固,当回忆定格。这是属于我和的独家记忆。 年前放假的最后一天,我们上线了「My Flyme 独家记忆」 H5 活动宣传页。 因种种原因,直到放假前几天,才突然要求我们参与并开始项目的前端部分。此时大概的情况是:所有数据已计算完毕;后端接口已完成待联调;交互视觉只出了不到四分之一(一共二十多个页面);我...

    harryhappy 评论0 收藏0

发表评论

0条评论

xiangchaobin

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<