提高html5的性能体验系列之三流畅下拉刷新

下拉刷新

为实现下拉刷新功能，大多H5框架都是经过DIV模拟下拉回弹动画，在低端android手机（Android4.4如下）上，DIV动画常常出现卡顿现象（特别是图文列表的状况）。
解决方案仍是webview。

既然拉div卡，那就不拉div，改拉webview。webview的拉动是原生的，回弹效果也是原生的，体验与原生一致。
思路是在父页面写titlebar，titlebar下面10像素左右写一个“下拉可刷新”。
而后append一个子webview，并设置为可下拉。
那么在把子webview往下拉时，会露出父页面的“下拉可刷新”字样，而且在拉到必定距离后会触发一个事件，js捕获到这个事件后能够更改“下拉可刷新”为“松开可刷新”。一样松开也会触发一个事件。

目前这个方案仅在Android上实现，iOS不存在性能问题，仍然可经过DIV拉动实现。

为了方便开发者一套代码解决问题，mui框架对2种方案进行了统一封装。
参考：http://dcloudio.github.io/mui/javascript/#pullrefresh-down

固然iOS的5+runtime也支持和Android同样的原生下拉刷新，对iOS上div方式不满意的同窗也能够直接使用原生下拉刷新，只是样式无法自定义。

上拉翻页

App里很常见的列表是滚到最下面时载入下一页内容。
传统的思路里，是依靠js监听滚动条位置来实现。这致使任意滚动列表时，都会形成这个监听事件触发，容易引起列表滑动卡顿。
HTML5Plus扩展了一个事件，是原生的下拉到底事件，在webview滚动条到底部时会自动触发。
这样js只需监听这个拉到底事件便可，提高了App的执行性能。