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

在普通web上的做法是使用div的滚动条，把list放到div里。
但是很不幸的是，div滚动条在Android4.4以下的手机上非常非常卡，滚动完全无法商用。

还有一种做法是把titlebar使用fix来固顶。
但此时手机浏览器的滚动条会通到顶部，当titlebar的右侧出现滚动条时，看起来非常怪异。
还有一个副作用是滚动太快时，titlebar的div会下来一下又弹上去。

有人说使用iframe，但是手机上的iframe问题非常多，很多手机不支持iframe，还有些手机的iframe里只能运行部分js，不能执行plus api，这个坑填不起。

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

想要解决这个问题其实也不难，既然div的滚动条卡，而浏览器body的整体滚动条不卡，那就把屏幕切分成2个webview，把titlebar的HTML装载到一个webview里，list页面是另一个webview，list页面直接使用浏览器的滚动条而不是div滚动条，这样就可以得到一个流畅的列表滑动体验。
滑动感觉和原生一模一样，在列表头尾的拉动回弹也和原生一模一样。
双webview布局有并排、覆盖、嵌套几种做法：
- 1、嵌套：在main页面里create一个list页面，append为main的子页面，摆好位置。
嵌套是比较常用的，因为嵌套后的2个webview成为一个整体，这个页面需要左滑移出屏幕时，只需要操作父页面的动画，子页面会自动根据移动。而使用非嵌套方案，要单独操作每个webview的移动动画，不容易控制同步。
- 2、覆盖和并排一般情况下用不到。

以下为嵌套的示例代码。在main页面里create一个listcontend页面，盖在main的上面，摆好位置。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <script type="text/javascript" charset="utf-8">

document.addEventListener("plusready",plusready,false);

function plusready () {

    var pwListcontent = plus.webview.getWebviewById("listcontent");

    if (pwListcontent) {

        console.log("该webview已经存在，不重复创建");

    }

    else{

        pwListcontent = plus.webview.create("listcontent.html","listcontent",{top:"44px",bottom:"0px"}) //创建名为listcontent的webview

        plus.webview.currentWebview().append(pwListcontent)

    }

}

        </script>

    </head>

    <body>

        <div style="text-align: center;">位于上面的webview里的title</div>

        <hr />

        <br /><br /><br /><br />

        <div id="divloading" style="text-align: center;">正在加载...</div>

    </body>

</html>

在mui框架里，通过mui的init里的subpage，可以通过配置而不是编码的方式更加简单的开发这种双webview界面

提升html5的性能体验系列之二列表流畅滑动的更多相关文章

  1. 提升HTML5的性能体验系列之二 列表流畅滑动

    App的顶部一般有titlebar,下面是list.常见的一个需求是要在list滚动时,titlebar不动.这个简单的需求,实现起来其实并不简单. 在普通web上的做法是使用div的滚动条,把lis ...

  2. 提升html5的性能体验系列之一避免切页白屏

    窗体切换白屏的现实问题 HTML5的性能比原生差很多,比如切页时白屏.列表滚动不流畅.下拉刷新和上拉翻页卡顿.在低端Android手机上,很多原生App常用的功能和体验效果都很难使用HTML5技术模拟 ...

  3. 提升HTML5的性能体验系列之一 避免切页白屏

    窗体切换白屏的现实问题 HTML5的性能比原生差很多,比如切页时白屏.列表滚动不流畅.下拉刷新和上拉翻页卡顿.在低端Android手机上,很多原生App常用的功能和体验效果都很难使用HTML5技术模拟 ...

  4. 提升html5的性能体验系列之三流畅下拉刷新

    下拉刷新 为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机(Android4.4以下)上,DIV动画经常出现卡顿现象(特别是图文列表的情况).解决方案还是web ...

  5. 提升HTML5的性能体验系列之三 流畅下拉刷新和上拉

    下拉刷新 为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机(Android4.4以下)上,DIV动画经常出现卡顿现象(特别是图文列表的情况).解决方案还是web ...

  6. 提升html5的性能体验系列之四使用原生ui

    原生UI即nativeUI的设计目的 HTML和css有一个优势就是灵活的样式设计.在大多数情况下,我们都应该使用HTML+css来负责UI.但是有些情况下,我们发现HTML+css的UI不满足需求. ...

  7. 提升HTML5的性能体验系列之五 webview启动速度优化及事件顺序解析

    webview加载时有5个事件.触发顺序为loading.titleUpdate.rendering.rendered.loaded.webview开始载入页面时触发loading,载入过程中如果&l ...

  8. 提升HTML5的性能体验系列之四 使用原生UI

    原生UI的设计目的 HTML和css有一个优势就是灵活的样式设计.在大多数情况下,我们都应该使用HTML+css来负责UI.但是有些情况下,我们发现HTML+css的UI不满足需求.1. 绝对置顶HT ...

  9. 提升html5的性能体验系列之五webview启动速度优化及事件顺序解析]

    webview加载时有3个事件.触发顺序为loading.titleUpdate.loaded.webview开始载入页面时触发loading,载入过程中如果title已经解析并赋予新值,则触发tit ...

随机推荐

  1. DirectShow音频采集声音不连续问题分析与解决办法经验总结

    最近广州大雨不断,并且多数无前兆,突然就来场大雨,给同学们降降温,说来本也是好事,但有时候下的真不是时候,最近这段时间都是即将下班了,大雨就来了,昨晚快下班前又出现了大雨,北方人总爱忘带雨伞,这不就被 ...

  2. 判断一个值是不是DBNull.Value

    C#读取数据库返回DataTable,遍历 DataTable, 在DataRow dr, 假如dr[0]是一个可空的值类型的字段,那么要赋值给C#程序的一个值类型(可空类型变量这里不讨论)变量时, ...

  3. Footer固定在页面底部(CSS)

    <style type="text/css"> #wapper{ position: relative; /*重要!保证footer是相对于wapper位置绝对*/ h ...

  4. 在选定的数据源上未找到名为“TitleSub”的字段或属

    在.NET开发过程中时常会遇到“在选定的数据源上未找到名为“TitleSub”的字段或属性”的错误”,导致这类错误的原因有很多,在我的项目中,详细情况是这样:1.有两个控件:DropDownList类 ...

  5. 规划（纪念我在ACM道路上的一年）

    现在已经是晚上一点了,我早早的躺在床上,不能入睡,因为睡觉前看了一下我们学校今年区域赛的成绩总结,派出八次队伍,七个铜-- 再加上这两天ACM迎新杯的筹备过程的问题,让我产生了深深的思考-- 去年司老 ...

  6. elasticsearch快照和恢复

    摘要:es可以通过简单的命令对索引或者整个集群进行快照和恢复 快照和恢复 Snapshot and restore 模块允许创建单个索引或者整个集群的快照到远程仓库. 在初始版本里只支持共享文件系统的 ...

  7. nefu 943 黑屏

    Description Veda 在用宽高比为a:b的显示器看一部宽高比为c:d的电影.在使用全屏模式看电影时,如果这个比例不相同,那么在显示器上就会出现了一些没有画面的地方,我们暂且称之为“黑屏”( ...

  8. CentOS 7 BIND 搭建

    域名查找顺序 设置 /etc/host.conf 1. bind 安装 $ yum install bind bind-utilsnslookup (name server lookup) 在bind ...

  9. php 控制循环

    控制结构语法 endif.endswitch.endwhile.endfor.endforeach

  10. TextUtils

    /** * 计算关键字在文本中出现的次数 * @param text * @param key * @return */ public static int count(String text, St ...