1

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>

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

4

2 回答 2

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' />
于 2012-09-16T03:18:14.627 回答
0

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

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

它解决了我的问题。

于 2014-10-18T03:17:51.620 回答