您现在的位置:首页 --> JavaScript --> AlloyTouch实现下拉刷新
AlloyTouch实现下拉刷新
浏览:1281次 出处信息
效果展示
背景
在手机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
建议继续学习:
- 分享一个JQUERY颜色选择插件 (阅读:12629)
- jQuery Color Animations颜色动画插件 (阅读:7070)
- 精于图片处理的10款jQuery插件 (阅读:6203)
- vim 常用插件推荐 (阅读:5959)
- WordPress插件开发 -- 在插件使用数据库存储数据 (阅读:5601)
- nyroModal:强大的jQuery弹出层插件 (阅读:4771)
- vim的一个js代码整理的插件jsbeautify.vim (阅读:4673)
- 如何创建google浏览器插件 (阅读:3824)
- [译]原生全屏Javascript API (阅读:3749)
- WordPress模板的image.php (阅读:3603)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:从零开始React服务器渲染
文章信息
- 作者:TAT.dnt 来源: 腾讯AlloyTeam
- 标签: AlloyTouch 全屏 插件
- 发布时间:2017-02-06 23:14:23
建议继续学习
近3天十大热文
- [67] Go Reflect 性能
- [67] Oracle MTS模式下 进程地址与会话信
- [67] 如何拿下简短的域名
- [61] IOS安全–浅谈关于IOS加固的几种方法
- [60] 图书馆的世界纪录
- [59] 【社会化设计】自我(self)部分――欢迎区
- [58] android 开发入门
- [56] 视觉调整-设计师 vs. 逻辑
- [49] 给自己的字体课(一)——英文字体基础
- [47] 界面设计速成