继上一篇文章后,我们继续来探讨HTML5的应用体验优化。
本次探讨的话题是列表如何在Android手机上流畅滚动。
App的顶部一般有titlebar,下面是list。
常见的一个需求是要在list滚动时,titlebar不动。这个简单的需求,实现起来其实并不简单。
在普通web上的做法是使用div的滚动条,把list放到div里。
但是很不幸的是,div滚动条在Android上非常非常卡,滚动完全无法商用。
还有一种做法是把titlebar使用fix来固顶。
但此时手机浏览器的滚动条会通到顶部,当titlebar的右侧出现滚动条时,看起来非常怪异。
还有一个副作用是滚动太快时,titlebar的div会下来一下又弹上去。
也有人说使用iframe,但是手机上的iframe问题非常多,很多手机不支持iframe,还有些手机的iframe里只能运行部分js,这个坑填不起。
想要解决这个问题其实也不难,还是使用plus.webview,把titlebar的HTML装载到另一个webview里,这样list页面的滚动条直接使用浏览器的滚动条而不是div滚动条,这样就可以得到一个流畅的列表滑动体验。
具体有2种做法,
- 1、在main页面里create一个list页面,盖在main的上面,摆好位置。
- 2、在list页面里create一个titlebar页面,盖在list的上面,摆好位置。
此时一般把list的body的margin-top设为titlebar页面的高度。
以下为示例代码。
方式1,在listmain页面里create一个listcontend页面,盖在main的上面,摆好位置。
document.addEventListener("plusready",plusready,false);
function plusready () {
plus.key.addEventListener("backbutton",function(){
plus.webview.currentWebview().opened()[0].close(); //按back键时把listcontend窗体关掉
plus.webview.currentWebview().close();//按back键时把本窗体关掉
},false);
if (plus.webview.getWebviewById("listcontent")) {
console.log("该webview已经存在,不重复创建");
}
else{
plus.webview.open("listcontent.html","listcontent",{top:"44px"});//创建名为listcontent的webview,装载listcontent.html的数据
}
}
方式2,在list页面里create一个titlebar页面,盖在list的上面,摆好位置。
document.addEventListener("plusready",plusready,false);
function plusready () {
plus.key.addEventListener("backbutton",function(){
plus.webview.currentWebview().opened()[0].close(); //按back键时把titlebar窗体关掉
plus.webview.currentWebview().close();//按back键时把本窗体关掉
},false);
if (plus.webview.getWebviewById("titlebar")) {
console.log("该webview已经存在,不重复创建");
}
else{
plus.webview.open("titlebar.html","titlebar",{height:"44px",scrollIndicator:"none"});//创建名为titlebar的webview,装载titlebar.html的数据,并且设置这个webview不出现滚动条
}
}
方式1和2相比,各有优劣。
如果list内容是联网取得,加载较慢,则方式1的用户体验稍好。
点击前一页内容时,现把titlebar部分快速移入,然后在下面显示一个正在加载的字样,同时开始载入listcontent的内容,载入完毕后盖住正在加载的字样。
但这种方式也有一个坏处就是从listmain到listcontent需要多次页面间传递参数。