Question

我对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...';
                        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>

滚动更快，更快!!我不明白为什么！

Answer 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' />

Answer 2

当我使用＆＃39; iscroll-lite.js＆＃39;在我的移动应用程序库中，我遇到同样的问题。然后我在'iscroll-lite.js＆＃39;中没有什么变化。库。

只需将e.preventDefault（）添加到＆＃39; _move：＆＃39;功能在＆＃39; iscroll-lite.js＆＃39;;

它解决了我的问题。

iScroll 4在iOS上的表现

2 个答案: