提升html5的性能体验系列之三流畅下拉刷新
2024-10-22 17:56:34
下拉刷新
为实现下拉刷新功能,大多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的执行性能。
最新文章
- [问答] Firemonkey 控件继承后无法显示(空白)
- 【BZOJ 4581】【Usaco2016 Open】Field Reduction
- HDU 4352 XHXJ's LIS
- 控制反转(Inversion of Control)之我的理解
- IOS 网络浅析-(四 get&;post)
- BC Harry and Magical Computer (拓扑排序)
- 【整理修订】Android.mk详解
- [Boost]boost的时间和日期处理-(1)日期的操作
- YT新人之巅峰大决战03
- HttpServletRequest对象(一)
- 消除SDK更新时的“https://dl-ssl.google.com refused”异常--(转)
- 错误: 非法字符: '\ufeff'
- 吴恩达机器学习笔记18-多类别分类:一对多(Multiclass Classification_ One-vs-all)
- 咏南WEB APP开发框架
- 【性能提升神器】STRAIGHT_JOIN
- CodeForces - 893D 贪心
- AD域相关的属性和C#操作AD域
- Python中续行符的注意事项
- Amcharts 柱状图和线形图
- 在sql中根据成绩显示学生排名