您现在的位置:首页 --> JavaScript --> AlloyTouch实现下拉刷新
AlloyTouch实现下拉刷新
浏览:958次 出处信息
效果展示
背景
在手机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颜色选择插件 (阅读:12390)
- jQuery Color Animations颜色动画插件 (阅读:6929)
- 精于图片处理的10款jQuery插件 (阅读:6059)
- vim 常用插件推荐 (阅读:5778)
- WordPress插件开发 -- 在插件使用数据库存储数据 (阅读:5409)
- nyroModal:强大的jQuery弹出层插件 (阅读:4660)
- vim的一个js代码整理的插件jsbeautify.vim (阅读:4534)
- 如何创建google浏览器插件 (阅读:3689)
- [译]原生全屏Javascript API (阅读:3659)
- WordPress模板的image.php (阅读:3413)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:从零开始React服务器渲染
文章信息
- 作者:TAT.dnt 来源: 腾讯AlloyTeam
- 标签: AlloyTouch 全屏 插件
- 发布时间:2017-02-06 23:14:23
建议继续学习
近3天十大热文
- [101] Go Reflect 性能
- [19] [译]Google Chrome中的高性能网
- [17] 在FreeNAS/BSD搭建基于Nginx+
- [16] 关于Linux的文件系统cache
- [14] Linux常用系统信息查看命令
- [14] 最近总结的一些技巧(vim,python,s
- [12] PHP加速器 eaccelerator 缓存
- [11] 什么是DNS劫持和DNS污染?
- [10] 精于图片处理的10款jQuery插件
- [10] nginx.conf控制指定的代理ip和ip