iOS 上的 iScroll 4 性能答案

【问题标题】：iScroll 4 performance on iOSiOS 上的 iScroll 4 性能
【发布时间】：2014-10-18 11:17:51
【问题描述】：

iScroll 在 iOS 上的流畅性给我留下了深刻的印象，因此我尝试在我的 iPhone 应用程序中实现它。

iScroll Demo 在我的 iPhone 上运行良好。但只有当可滚动内容像<li> 元素中的短文本一样简单时：

<ul id="thelist">
    <li>Pretty row 1</li>
    <li>Pretty row 2</li>
    <li>Pretty row 3</li>
        etc..
</ul>

当我试图放一个稍微复杂一点的内容时：

<ul>
    <li class="GOE-WOTBDO GOE-WOTBIO GOE-WOTBEO " __idx="0">
        <div class="cssDivStyle">
                <img width="120px" height="74px" src="http://some_jpg_image.jpg">
        </div> 
        <div> 
            <p>Some long text ....</p>
        </div>
    </li>

平滑度完全没有了，列表几乎没有滚动..

有没有办法让我的内容更轻？

有什么建议吗？非常感谢！

这是我声明 iScroll 元素的方式：

myScroll = new $wnd.iScroll(
            elem,
            {
                useTransition : true,
                topOffset : pullDownOffset,
                hScroll : false,
                onRefresh : function() {
                    if (pullDownEl.className.match('loading')) {
                        pullDownEl.className = 'pullDown';
                        pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
                    }
                },
                onScrollMove : function() {
                    if (this.y > 5 && !pullDownEl.className.match('flip')) {
                        pullDownEl.className = 'flip pullDown';
                        pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
                        this.minScrollY = 0;
                    }

                },
                onScrollEnd : function(response) {
                    if (pullDownEl.className.match('flip')) {
                        pullDownEl.className = 'loading pullDown';
                        pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
                        app.@ma.xxx.xxxxx.clientcommon.utils.IPhoneScroller::callbackSuccess(Lcom/google/gwt/user/client/rpc/AsyncCallback;Lcom/google/gwt/core/client/JavaScriptObject;)(pullDownCallback,response);
                    }
                }
            });

[编辑]

仅通过从以下位置删除 divs：

<ul>
    <li class="GOE-WOTBDO GOE-WOTBIO GOE-WOTBEO " __idx="0">
        <div class="cssDivStyle">
            <img width="120px" height="74px" src="http://some_jpg_image.jpg">
        </div> 
        <div> 
            <p>Some long text ....</p>
        </div>
</li>

并做到：

<ul>
    <li class="GOE-WOTBDO GOE-WOTBIO GOE-WOTBEO " __idx="0">
        <img class="cssDivStyle" width="120px" height="74px" src="http://some_jpg_image.jpg">
        <p>Some long text ....</p>
    </li>

使滚动速度更快！我不知道为什么！

【问题讨论】：

根据经验，我会避免 iscroll 太丰富。这是一个很棒的脚本，但我已经尝试过让它顺利运行，但无济于事。相反，如果您使用滚动来保持页脚和页眉静止，我建议您使用位置固定的容器。这会产生奇迹，并且会在旧设备上优雅地降级
@AndresGallo 感谢您的评论。但我不明白如何使用位置固定容器？我的页脚和页眉确实是位置固定的，只有主体是可滚动的..
所以你已经在使用固定的css位置，只有你的主体是可滚动的，对吧？我可能误解了一些东西......如果是这样，你为什么要使用iscroll？使用 css，您实际上并不需要 iScroll 来使页眉和页脚保持原位。（在 ios 5 和 2.1 之前的 android 设备中确实如此）
所以我在顶部有一个固定的页眉，在底部有一个固定的页脚，中间有一个<UL> 列表，如我的问题中所述。我使用 iScroll 垂直滚动列表，同时保持页眉和页脚不动。

标签： iphone ios gwt iscroll4 iscroll

【解决方案1】：

下面的代码将以 webkit 期望的方式呈现您的页面。所以重绘会大大加快。

HTML

<body>
    <div class="headerFix">
        <div class="header">
            <!-- The content in header...logo/menu/e.t.c -->
        </div>
    </div>
    <div class="content"><!-- you dont need this extra div but it keeps structure neat -->
        <ul>
            <li>List content here which can be as complex as needed</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
        </ul>
    </div>
    <div class="footerFix">
        <div class="footer">
            <!-- The content in footer -->
        </div>
    </div>
...

CSS

.headerFix, .header {
    height:50px; /*important to share width in both divs*/    
    width:100%;
    background:red;
}

.headerFix, .footerFix {
    position:relative;
}

.header {
    position:fixed;
    top:0;
    left:0;
    /*this is now fixed, but the parent being in flow keeps this div from overlapping your list which is why the height had to be the same for both*/
}

ul li {
    /*basic list look for sample purposes*/
    display:block;
    min-height:40px;
    border-bottom:solid 1px #777;
}

.footerFix, .footer {
    height:50px; /*important to share width in both divs*/
    width:100%;
    background:red;
}


.footer {
    position:fixed;
    top:0;
    left:0;
    /*you will need to use javascript to find the height of device screen to know what the css value for "top" should really be. This will take some work on android where getting screen sizes is funky if you plan to support it. */
    /*If its iphone only you can assume the size which has always been the same, and make an exception for the new iphone 6. I say use javascript to position this footer if you plan to support many platforms*/
}

顺便说一句，我建议在你的 html 头中使用这个元标记，以确保你最好地使用屏幕

<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />

【讨论】：

谢谢你的回答，我有一个稍微相似的布局，但我没有使用js来修复页脚的顶部。同时，我通过删除里面的两个 div 并只留下 img 和 p 标签使我的 <li> 内容稍微轻了一点，现在它工作得很好..!!我赞成你的回答，如果我的 li 里还有更复杂的数据，我会试试你的解决方案

【解决方案2】：

当我在移动应用程序中使用“iscroll-lite.js”库时，我遇到了同样的问题。然后我在“iscroll-lite.js”库中几乎没有变化。

只需将 e.preventDefault() 添加到 'iscroll-lite.js' 中的 '_move:' 函数即可；

它解决了我的问题。

【讨论】：