技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> AlloyTouch实现下拉刷新

AlloyTouch实现下拉刷新

浏览:1281次  出处信息

效果展示

你也可以点击这里访问Demo
可以点击这里查看代码


背景

在手机QQ内部,其实客户端提供了下拉刷新的能力,拖动整个webview进行下拉刷新,loading以及loading相关的wording和动画都是客户端的。解决了一部分需要下拉场景的问题。但是在某些场景下,还是需要web拥有自身的下拉刷新的能力。比如:

  • 需要统一IOS和安卓的体验

  • 需要自定义下拉刷新动画

  • 需要已web内的背景或者其他Dom元素有联动交互反馈

而拖动整个webview的下拉刷新无法满足这些场景。AlloyTouch很明显非常擅长处理web下拉刷新的需求。

页面骨架实现

pullRefresh在AlloyTouch header的下面,其中:
header zIndex > pullRefresh zIndex >wrapper和scroller的 zIndex。

下拉动画实现

看以看到,下拉到一定程度,箭头有个旋转动画,以及wording描述也会变化。这里主要利用js去切换class去实现,动画使用CSS transition实现。所以要预先定义好两种class。

通过上面定要好的class,在js逻辑里面只需要负责remove和add arrow_up clas便可以实现箭头旋转和wording的切换。

Loading动画实现

loading效果使用SVG去实现,利用12个rect的 indefinite animate去实现。begin代表开始时间有个递增达到loading的效果。

核心实现

不废话,都在注释里。

开始AlloyTouch

Github:https://github.com/AlloyTeam/AlloyTouch

原文地址:https://github.com/AlloyTeam/AlloyTouch/wiki/Pull-to-refresh

建议继续学习:

  1. 分享一个JQUERY颜色选择插件    (阅读:12629)
  2. jQuery Color Animations颜色动画插件    (阅读:7070)
  3. 精于图片处理的10款jQuery插件    (阅读:6203)
  4. vim 常用插件推荐    (阅读:5959)
  5. WordPress插件开发 -- 在插件使用数据库存储数据    (阅读:5601)
  6. nyroModal:强大的jQuery弹出层插件    (阅读:4771)
  7. vim的一个js代码整理的插件jsbeautify.vim    (阅读:4673)
  8. 如何创建google浏览器插件    (阅读:3824)
  9. [译]原生全屏Javascript API    (阅读:3749)
  10. WordPress模板的image.php    (阅读:3603)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1