[重磅] 让HTML5达到原生的体验 系列之二 列表流畅滚动

继上一篇文章后，我们继续来探讨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需要多次页面间传递参数。