HTML5技术

AlloyTouch实现下拉刷新 - 【当耐特】

字号+ 作者:H5之家 来源:H5之家 2017-01-10 13:01 我要评论( )

原文地址:https://github.com/AlloyTeam/AlloyTouch/wiki/Pull-to-refresh 效果展示 扫码体验 你也可以点击这里访问Demo 可以点击这里查看代码 背景 在手机QQ内部,其实客户端提供了下拉刷新的能力,拖动整个webview进行下拉刷新,loading以及loading相关的w

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

效果展示

扫码体验

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

背景

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

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

页面骨架实现

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

下拉动画实现

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

.arrow { margin5px; margin5px; } ...(180deg)(180deg); } .20px.4s ease; }

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

Loading动画实现

xmlnspreserveAspectRatiorect xwidthfill... ... </svg>

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

核心实现

var scroller = document.querySelector("#scroller"), arrow = document.querySelector("#arrow"), pull_refresh = document.querySelector("#pull_refresh"), list = document.querySelector("#list"), index (pull_refresh(scroller(scroller.(value) .(evt) ..(evt) .()(at) .(len (.index.....); }

不废话,都在注释里。

开始AlloyTouch

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

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


 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 一个简单粗暴的人脸认证标注工具的实现 - 喵耳朵

    一个简单粗暴的人脸认证标注工具的实现 - 喵耳朵

    2017-01-05 11:01

  • Dropzone.js实现文件拖拽上传 - 小熊吉米

    Dropzone.js实现文件拖拽上传 - 小熊吉米

    2017-01-05 09:00

  • ASP.Net MVC4+Memcached+CodeFirst实现分布式缓存 - 奔跑吧!小郭

    ASP.Net MVC4+Memcached+CodeFirst实现分布式缓存 - 奔跑吧!小郭

    2017-01-01 13:00

  • iosselect:一个js picker项目,在H5中实现IOS的select下拉框效果 - mufc-go

    iosselect:一个js picker项目,在H5中实现IOS的select下拉框效果 -

    2017-01-01 10:02

网友点评