HTML 提升HTML5的性能体验系列 列表流畅滑动

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012265444/article/details/72272152

今天发现项目有一个页面滑动效果在iOS(iPhone6s&iPhoneSE)上十分顺畅,到安卓手机(三星新款手机,性能较高)上就很卡顿,百思不得其解。

请教了同学之后,找到这样一篇文章:提升HTML5的性能体验系列之二 列表流畅滑动

看了一下,意识到可能是因为div滑动而不是body滑动造成的卡顿。


检查了CSS文件

			body {
				background-color: #eaeaea;
				overflow: hidden;			
				}

发现我不小心将body滚动给关闭了,马上把overflow:hidden这行代码删掉。

检查了一下,发现滑动卡顿的情况没有了。


为了方便读者现将原文粘贴于下方,感谢作者分享。

App的顶部一般有titlebar,下面是list。
常见的一个需求是要在list滚动时,titlebar不动。
这个简单的需求,实现起来其实并不简单。

在普通web上的做法是使用div的滚动条,把list放到div里。
但是很不幸的是,div滚动条在Android4.4以下的手机上不可商用,如果dom复杂,不管多高端的Android手机,滚动效果也惨不忍睹。

还有一种做法是把titlebar使用fix来固顶。
但此时手机浏览器的滚动条会通到顶部,当titlebar的右侧出现滚动条时,看起来非常怪异。
还有一个副作用是滚动太快时,titlebar的div会下来一下又弹上去。这是因为滚动时触发页面重绘,dom很复杂时重绘来不及,绝对定位的titlebar就会先下来后上去。

还有一种方法是使用自绘的滚动条,即不用浏览器的滚动条,自己画一个滚动条,iScroll等方案是采取这种思路。但模拟的始终是模拟的,和原生的滚动条效果还是差很多,在列表头和尾的拉动回弹的表现不佳,而且列表长了、内容复杂了,非常卡顿。

想要解决这个问题其实也不难,既然div的滚动条卡,而浏览器body的整体滚动条不卡,那就老老实实使用浏览器的body滚动。title区域有2种处理方式。
1. 原生title
HBuilder8.0起,支持了原生的navigationbar,创建webview对象时,在style参数里配置navigationbar就可以得到一个原生的title。
HTML页面的滚动部分会自动在这个原生title下面。
而这个原生title,又属于nativeObj.view,可以自由的在上面写字绘图,拥有良好的自定义性。
在HBuilder8.2中,navigationbar被进一步合并到subnview体系中,成为webview的titleNview。拥有比之前更好的动画性能。
配合nativeObj下面的原生imageslider,还可以实现沉浸式题图效果,题图开始通顶到状态栏上,在向下滚动后渐变消失,而title渐变出现,非常动感。
关于沉浸式,是另外的话题,此处不展开。有兴趣可参考http://ask.dcloud.net.cn/article/1150
而且在新窗体动画时,不管内容页面渲染多么慢,原生title在动画期间一定是渲染好的。
mui对这个效果进行了封装,使用mui.openWindowWithTitle即可打开一个带原生头的webview。
在Hello mui里nav bar中点“native title”,可看到效果和源码。
2. 基于div的通顶渐变title
很多界面顶部是图片,滚动后渐变出现title,这种设计就不怕滚动条通顶。
基于div一样可以实现题图开始通顶,在向下滚动后渐变消失,而title渐变出现。
在Hello mui里nav bar中点“透明渐变(div模式)”,可看到效果和源码。
(Hello mui中的示例没有沉浸式,实际是可沉浸的,即图片通到状态栏上,需要单独配置webview的沉浸式)
当然也不是所有的界面都可以这么设计,所以掌握方案1中的原生title是必须的。

已过期历史:在HBuilder8.0以前,官方曾推荐过双title式title。
即把屏幕切分成2个webview,把titlebar的HTML装载到一个webview里,list页面是另一个webview,list页面直接使用浏览器的滚动条而不是div滚动条,这样也可以得到一个流畅的列表滑动体验。
在mui框架里,通过mui的init里的subpage,可以通过配置而不是编码的方式更加简单的开发这种双webview界面。

关于滚动流畅度:

有人仍然使用div滚动然后抱怨滚动不流畅,注意检查自己的代码,一定要用body滚动而不是div滚动。
mui为了多端发布兼容和部分选择器项目滚动,是提供了div滚动的,尤其是在iOS上因为性能较高使用面更大,但这些都是可配置的,觉得不流畅时注意检查配置是不是变成div滚动了。
另外不管是mui提供的div滚动还是plus.webview的body滚动,都是可以设滚动加速度值的,可以根据自己的页面情况设置不同的加速度值。
关于滚动时虽然速度快,但掉帧,即不够平滑,一般是因为js监听了滚动或Android硬件加速未启用。具体在文档中心搜索硬件加速。


展开阅读全文

没有更多推荐了,返回首页