zoukankan      html  css  js  c++  java
  • 提升html5的性能体验系列之二列表流畅滑动

    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界面

  • 相关阅读:
    中芯国际内争的真相
    对Delphi控件作用的新理解(控件本身的源代码就是一个很强的工业级源码)
    百度云怎么赚钱
    百度地图在某架构下找不到符号.a文件的问题
    忽然发现,if语句没有相应的continue功能
    可怜的苏联,以及可恨的戈尔巴乔夫
    感觉镀金没有用,兼论小公司与大公司的选择
    开发团队的民主集中制
    关于明末历史(已全部写完)
    CF 322B Ciel and Flowers 贪心水题
  • 原文地址:https://www.cnblogs.com/susanws/p/5420714.html
Copyright © 2011-2022 走看看