提升HTML5的性能体验系列之三 流畅下拉刷新和上拉翻页

系列文章目录导航:
- 提升HTML5的性能体验系列之一 避免切页白屏
- 提升HTML5的性能体验系列之二 列表流畅滑动
- [提升HTML5的性能体验系列之三 流畅下拉刷新]
- 提升HTML5的性能体验系列之四 使用原生UI(nativeUI)
- 提升HTML5的性能体验系列之五 webview启动速度优化及事件顺序解析
- 提升HTML5的性能体验系列之六 降低内存占用

本文更新于2017-5-8

下拉刷新

\n

为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机上,DIV动画经常出现卡顿现象(特别是图文列表的情况)。
解决方案有如下2种。

1.原生circle下拉刷新
既然拉div卡,我们就不拉div,而是拉一个原生的圈圈下来。
在Android上,google官方提供了一个下拉刷新样式。5+引擎将其封装给js调用。如下图

在一个HTML页面中,title区域仍然是普通dom,不是双webview也不是原生头,在这个webview的style里指定下拉刷新的circle模式,配置起始位置高度,就可以在该webview拉到顶部后再次下拉时在指定位置出现一个旋转的箭头。
api见:http://html5plus.org/doc/zh_cn/webview.html里搜索circle。
示例代码参考Hello mui里pull to refresh(下拉刷新和上拉加载)中的单webview模式。
iOS上也可以使用circle方式。使用同样的代码,在iOS上也有同样的下拉刷新效果。
2. 双webview上下拉开式下拉刷新
官方推荐使用高性能的circle下拉刷新方式,但如果实在不能接受circle这种风格,需要上下拉开的下拉刷新,那么可以使用如下方案。
拉div卡那就不拉div,改拉webview。webview的拉动是原生的,回弹效果也是原生的,体验与原生一致。
此时需要双webview的父子页面,思路是在父页面写title,title下面10像素左右写一个文字“下拉可刷新”。
然后append一个子webview,并在style里设置为可下拉。
那么在把子webview往下拉时,会露出父页面的“下拉可刷新”字样,并且在拉到一定距离后会触发一个事件,js捕获到这个事件后可以更改“下拉可刷新”为“松开可刷新”。同样松开也会触发一个事件。
这种模式,下拉漏出的内容是在父页面的HTML中写的,所以样式可以随便定制,实现个性化下拉刷新。

但目前上下拉开的下拉刷新,Android和iOS有实现差异。
上述模式为Android模式。在iOS上,不能在父页面title下面随便定制下拉露出内容的样式,而是需要在子webview的style里配置。
API同样是在http://html5plus.org/doc/zh_cn/webview.html,搜索WebviewRefreshStyles,style里选default模式。
因为是配置方式,iOS上这种模式的下拉刷新无法实现非常个性化的效果。
如果实在需要iOS上做个性化下拉刷新,也可以使用div方式,毕竟iOS上的div拉动性能还是没多大问题的。
为了方便开发者一套代码解决问题,mui框架对2种方案进行了统一封装,即Android上使用双webview自定义下拉刷新,iOS上使用了div下拉刷新。
参考:http://dev.dcloud.net.cn/mui/pulldown/

注意双webview模式增加了app的内存和渲染压力,官方首推的是单webview的circle模式的下拉刷新。

上拉翻页

\n

App里很常见的列表是滚到最下面时载入下一页内容。
传统的思路里,是依靠js监听滚动条位置来实现。这导致任意滚动列表时,都会造成这个监听事件触发,容易引发列表滑动卡顿。
HTML5Plus扩展了一个事件,是原生的下拉到底事件,在webview滚动条到底部时会自动触发。
这样js只需监听这个拉到底事件即可,提升了App的执行性能。
5+ API参考:http://www.html5plus.org/#specification#/specification/Events.html
MUI封装参考:http://dev.dcloud.net.cn/mui/pullup/

这些代码示例在Hello H5+和Hello mui中都有。


7 分享 关注
多串君 jqz 西芹 影sky 你猜我猜不猜 最爱橙子 DCloud_客服_Trust
505744817@qq.com

505744817@qq.com

masd
0 赞 2017-06-22 14:41
HGDQ

HGDQ

[《HTML5 WebApp开发(二)表格上拉加载更多下拉刷新》](http://blog.csdn.net/zhuming3834/article/details/51485074)
1 赞 2016-05-24 22:22
RickSun

RickSun

为什么我使用了这个, 导致刷新这个区域里面元素绑定的事件 没有任何翻译了呢? 我的ios7.0.1是有这个问题的. android下没有发现这个问题
0 赞 2015-11-19 16:20
菠菜哥

菠菜哥 回复 yss

yss,你好,小弟也遇到问题了。有demo参考一下吗。小弟不胜感激。
0 赞 2015-08-11 16:48
yss

yss 回复 DCloud_heavensoft

后来看demo,改用:`plus.webview.currentWebview().setPullToRefresh`这个方法就不卡了
0 赞 2015-04-11 16:06
DCloud_heavensoft

DCloud_heavensoft 回复 yss

应该不会。把代码贴出来,单独在ask上建个问题。
0 赞 2015-04-10 05:04
yss

yss

使用了,封装的pullrefresh-down方法。
在1k条数据下iphone 5下非常卡。
0 赞 2015-04-09 14:47

要回复文章请先登录注册