TAT.dnt AlloyTouch 实现下拉刷新
In Web开发 on 2017年01月09日 by view: 5,107
1

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

效果展示

你也可以点击这里访问 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

任何意见和建议欢迎 new issue,AlloyTouch 团队会第一时间反馈。


原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2017/01/alloytouch-implementing-dropdown-refresh/

  1. 666666 2017 年 3 月 7 日

    66666666

发表评论