进击的ruixi

Mobile开发经验

在手Q开发过程中，遇到各种问题，解决之后沉淀如下，细分为：
1、经验沉淀：开发过程怎么快速开发并在开发过程中可以兼顾到一些场景的出现
2、疑难问题：一些机型出现的疑难问题，如和解决，以及对应的机型等问题详细描述

一、[机型兼容][IOS]position:fixed + input问题

1.  当input获得焦点并弹出虚拟键盘时，页面上position:fixed的元素的位置会错乱。

解决方案

  1. 用position:absolute模拟，这个效果不佳，在pc端hack ie6...只能呵呵
  2. 当input元素focus时，改成position:absolute，blur的时候再改回来
  3. 使用iscroll库
  4. 使用div内滚动

二、[机型兼容][IOS8]闪屏问题

1.  大面积的页面内刷新时出现，这种闪屏不是位置错乱的那种闪屏，具体原因不详

规避方案

  1. 提高刷新效率，尽量减少reflow和repaint
  2. 刷新之后不要改变页面的scroll状态，即不要从不能scroll刷到可以scroll，反之亦然（利用min-height让页面一直处于scroll状态）
  3. 不要刷新图片，利用localstorage缓存图片链接，命中的图片直接使用src，而不要用lazyload

三、Listview 太长引起的手机性能问题

1.  内存中存留的DOM结构太多，导致滚动的 Listview 后面，点击响应会延迟，甚至无响应。

解决方法

  1. 在 li 外面包裹一层，将前面页码的 dom 移除，同时设置外层容器的高度（这样不至于影响滚动条）
  2. 下拉滚动翻页过程中，对之前页码的数据进行隐藏。（向上滚动时，采取一定的策略将隐藏的数据显示）
  3. 不要刷新图片，利用localstorage缓存图片链接，命中的图片直接使用src，而不要用lazyload

四、弹出框中的滚动事件冒泡导致body也滚动

1.  当弹出框内容在滚动时，如果滚动到边界，会导致页面内容也会跟着滚动。

解决方法

  1. 在显示对话框时，将html和body的height都设置为100%，overflow都设置为hidden，然后在对话框关闭时将html和body的height与overflow属性都设置为auto。

    打开对话框和关闭对话框后分别执行的函数：

    function lockBody() {
        $body.css({
            height: "100%",
            overflow: "hidden"
        });

        $html.css({
            height: "100%",
            overflow: "hidden"
        });
    }

    function unlockBody() {
        $body.css({
            height: "auto",
            overflow: "auto"
        });
        $html.css({
            height: "auto",
            overflow: "auto"
        });
    }
  2. 在body内加一层div.scroll-wrapper，这个div包含页面的所有显示内容但不包含弹出框，.scroll-wrapper和html还有body的height都为100%，html和body的overflow为hidden，.scroll-wrapper的overflow为scroll。让.scroll-wrapper的div来控制页面内容的滚动。因为弹出框是通过fix布局不属于.scroll-wrapper的子元素，所以滚动不会冒泡到.scroll-wrapper上。

    DOM结构：

    <body>
<div class="scroll-wrapper">
    <div class="banner">
        banner
    </div>
    <div class="content">
        <p>p </p>
    </div>
</div>
<div id="mask">
</div>
<div class="dialog">
    <div class="dialog-head">

    </div>
    <div class="dialog-body">
        <ul>
            <li>aaaaaaaaa</li>
        </ul>
    </div>
    <div class="dialog-foot">
        <a href="javascript:;">确定</a>
        <a class="close" href="javascript:;">关闭</a>
    </div>
</div>
<script src="zepto.js" ></script>
<script src="index.js" ></script>
</body>

    CSS

    .scroll-wrapper {
    height: 100%;
    width: 100%;
    overflow: scroll;
}

html, body {
    height: 100%;
    overflow: hidden;
}
  3. 不要刷新图片，利用localstorage缓存图片链接，命中的图片直接使用src，而不要用lazyload