iphone - iScroll 4在iOS上的性能

iOS上iScroll的流畅性给我留下了深刻的印象，所以我尝试在我的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...';
                        [email protected]::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>

使滚动快得多！我不知道为什么！

最佳答案

下面的代码将按照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标签，以确保您以最佳状态使用屏幕

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

关于iphone - iScroll 4在iOS上的性能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12444002/

iscroll

iphone - iScroll 4在iOS上的性能