提升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://dev.dcloud.net.cn/mui/pulldown/
当然iOS的5+runtime也支持和Android一样的原生下拉刷新,对iOS上div方式不满意的同学也可以直接使用原生下拉刷新,只是样式没法自定义。
上拉翻页
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中都有。
提升HTML5的性能体验系列之三 流畅下拉刷新和上拉的更多相关文章
- 提升html5的性能体验系列之三流畅下拉刷新
下拉刷新 为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机(Android4.4以下)上,DIV动画经常出现卡顿现象(特别是图文列表的情况).解决方案还是web ...
- 提升html5的性能体验系列之一避免切页白屏
窗体切换白屏的现实问题 HTML5的性能比原生差很多,比如切页时白屏.列表滚动不流畅.下拉刷新和上拉翻页卡顿.在低端Android手机上,很多原生App常用的功能和体验效果都很难使用HTML5技术模拟 ...
- 提升HTML5的性能体验系列之一 避免切页白屏
窗体切换白屏的现实问题 HTML5的性能比原生差很多,比如切页时白屏.列表滚动不流畅.下拉刷新和上拉翻页卡顿.在低端Android手机上,很多原生App常用的功能和体验效果都很难使用HTML5技术模拟 ...
- 提升HTML5的性能体验系列之二 列表流畅滑动
App的顶部一般有titlebar,下面是list.常见的一个需求是要在list滚动时,titlebar不动.这个简单的需求,实现起来其实并不简单. 在普通web上的做法是使用div的滚动条,把lis ...
- 提升html5的性能体验系列之二列表流畅滑动
App的顶部一般有titlebar,下面是list.常见的一个需求是要在list滚动时,titlebar不动.这个简单的需求,实现起来其实并不简单. 在普通web上的做法是使用div的滚动条,把lis ...
- 提升html5的性能体验系列之四使用原生ui
原生UI即nativeUI的设计目的 HTML和css有一个优势就是灵活的样式设计.在大多数情况下,我们都应该使用HTML+css来负责UI.但是有些情况下,我们发现HTML+css的UI不满足需求. ...
- 提升HTML5的性能体验系列之五 webview启动速度优化及事件顺序解析
webview加载时有5个事件.触发顺序为loading.titleUpdate.rendering.rendered.loaded.webview开始载入页面时触发loading,载入过程中如果&l ...
- 提升HTML5的性能体验系列之四 使用原生UI
原生UI的设计目的 HTML和css有一个优势就是灵活的样式设计.在大多数情况下,我们都应该使用HTML+css来负责UI.但是有些情况下,我们发现HTML+css的UI不满足需求.1. 绝对置顶HT ...
- 提升html5的性能体验系列之五webview启动速度优化及事件顺序解析]
webview加载时有3个事件.触发顺序为loading.titleUpdate.loaded.webview开始载入页面时触发loading,载入过程中如果title已经解析并赋予新值,则触发tit ...
随机推荐
- 简单web测试流程(转载)
转载自 http://blog.csdn.net/qq_35885203 1.界面操作模式打开jmeter 进入jmeter安装目录的bin目录下,双击“jmeter.bat”文件即可打开jmeter ...
- python学习day5 常量 运算符补充 流程控制基础
1.常量 值不会改变的量 python中没有特别的语法定义常量,一般约定用全大写字母命名常量,比如圆周率pi 2.预算符补充 2.1算数运算符 print(10/3)除法运算 print(10//3) ...
- 第十一章 串 (c1)KMP算法:从记忆力到预知力
- 源码调用ffmpeg库时,需要注意接口为C接口
即引用相关头文件时候,要使用extern "C"{}来包含. 关于extern "C"{}的详情,参考:http://www.cnblogs.com/skyne ...
- pandas中关于DataFrame 去除省略号
#显示所有列 pd.set_option('display.max_columns', None) #显示所有行 pd.set_option('display.max_rows', None) #设置 ...
- Vue之组件
Vue之全局组件 全局组件可以被任何局部组件调用 <div id="app"> <!--这里是组件的使用--> <global-component&g ...
- RxJS之转化操作符 ( Angular环境 )
一 map操作符 类似于大家所熟知的 Array.prototype.map 方法,此操作符将投射函数应用于每个值 并且在输出 Observable 中发出投射后的结果. import { Compo ...
- Django的视图函数和路由系统中一些没有用过的小点
1.request对象 print("返回用户访问的url,但是不包括域名",request.path_info) print("返回请求的方法,全大写",re ...
- python中if not x: 和 if x is not None: 和 if not x is None的使用和区别
代码中经常会有变量是否为None的判断,有三种主要的写法: 第一种是`if x is None`: 第二种是 `if not x:`: 第三种是`if not x is None`(这句这样理解更清晰 ...
- sql2000三个表的级联删除
sql2000中三个表级联删除 create table a( id int primary key, Content varchar(50)) create table b( id ...