Question

我正在使用PhoneGap 1.3.0和Jquery Mobile 1.0制作应用程序。要滚动listview我想使用iScroll，但滚动性能太糟糕了。滚动太慢了。

我也做了一些测试。

如果我在没有jQuery Mobile的情况下使用代码，那就很快

<div id="scroller">
    <ul id="thelist" >
        <li>Pretty row 1</li>
        <li>Pretty row 2</li>
        <li>Pretty row 3</li>

...

但是如果我添加jQuery Mobile类型listview之类的。

<div id="scroller">
    <ul id="thelist" data-role="listview" data-inset="true" data-theme="c">
        <li>Pretty row 1</li>
        <li>Pretty row 2</li>
        <li>Pretty row 3</li>

很慢。我该如何解决？

Answer 1

您可以从jQuery Mobile的样式表中删除-down和-hover CSS样式。当您滚动列表时，您将手指“悬停”在列表项上，触发它以更改它的样式，因为应用了-hover类。如果将-hover类更改为与-up类相同，则不会进行重绘，滚动会更顺畅。我测试了这个，它在我的Android 2.3设备上运行良好。

以下是我的意思的示例，请注意类规则的-up / -down / -hover版本：

.ui-btn-up-a {
    border: 1px solid       #222 /*{a-bup-border}*/;
    background:             #333333 /*{a-bup-background-color}*/;
    font-weight: bold;
    color:                  #fff /*{a-bup-color}*/;
    text-shadow: 0 /*{a-bup-shadow-x}*/ -1px /*{a-bup-shadow-y}*/ 1px /*{a-bup-shadow-radius}*/ #000 /*{a-bup-shadow-color}*/;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #555 /*{a-bup-background-start}*/), to( #333 /*{a-bup-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* Opera 11.10+ */
    background-image:         linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/);
}

.ui-btn-hover-a {
    border: 1px solid       #000 /*{a-bhover-border}*/;
    background:             #444444 /*{a-bhover-background-color}*/;
    font-weight: bold;
    color:                  #fff /*{a-bhover-color}*/;
    text-shadow: 0 /*{a-bhover-shadow-x}*/ -1px /*{a-bhover-shadow-y}*/ 1px /*{a-bhover-shadow-radius}*/ #000 /*{a-bhover-shadow-color}*/;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #666 /*{a-bhover-background-start}*/), to( #444 /*{a-bhover-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* Opera 11.10+ */
    background-image:         linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/);
}

.ui-btn-down-a {
    border: 1px solid       #000 /*{a-bdown-border}*/;
    background:             #3d3d3d /*{a-bdown-background-color}*/;
    font-weight: bold;
    color:                  #fff /*{a-bdown-color}*/;
    text-shadow: 0 /*{a-bdown-shadow-x}*/ -1px /*{a-bdown-shadow-y}*/ 1px /*{a-bdown-shadow-radius}*/ #000 /*{a-bdown-shadow-color}*/;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #333 /*{a-bdown-background-start}*/), to( #5a5a5a /*{a-bdown-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* Opera 11.10+ */
    background-image:         linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/);
}

<强>更新

所以为了进行更改我建议它就像下载jQuery Mobile框架一样简单，打开CSS样式表的非缩小版本（也可以在这里找到：http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.css），并删除{ {1}}和-down类。

您可以在此处下载jQuery Mobile：http://jquerymobile.com/download/

基本上，查找所有-hover类声明并删除.ui-btn-***-*等于***或hover的代码内部的代码，并且会有倍数，因为那里是每个主题的一个，这是down的最后一个*。

完成后，上面的CSS会是这样的：

a-e

注意我没有对.ui-btn-up-a { border: 1px solid #222 /*{a-bup-border}*/; background: #333333 /*{a-bup-background-color}*/; font-weight: bold; color: #fff /*{a-bup-color}*/; text-shadow: 0 /*{a-bup-shadow-x}*/ -1px /*{a-bup-shadow-y}*/ 1px /*{a-bup-shadow-radius}*/ #000 /*{a-bup-shadow-color}*/; background-image: -webkit-gradient(linear, left top, left bottom, from( #555 /*{a-bup-background-start}*/), to( #333 /*{a-bup-background-end}*/)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* FF3.6 */ background-image: -ms-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* IE10 */ background-image: -o-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* Opera 11.10+ */ background-image: linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); } .ui-btn-hover-a {} .ui-btn-down-a {}类做任何事情，它是默认类，我不想改变页面的外观，我只想阻止浏览器在滚动列表时重绘文档

完成CSS样式表的编辑后，复制代码并将其粘贴到http://htmlcompressor.com/compressor.html，选择右侧的“CSS”选项，然后单击“压缩”。这将创建一个为生产环境准备好的CSS样式表的缩小版本（这将大大减少代码的大小）。

Answer 2

删除.ui-btn-hover-x和.ui-btn-down-x对我没有任何影响。

<强> jquery.mobile-1.1.1

删除内容包装器为我修复它。

<div data-role='content'> </div>

它在safari中滚动就像网页一样流畅。

Answer 3

查看CSS3 transform

启用硬件加速后，带有iScroll的jqm listview正在滚动，就像它现在正在使用黄油一样。

此行为似乎仅发生在移动设备上。

我在这里做了一个小提琴手，告诉你它是如何工作的:(使用移动设备查看差异） http://jsfiddle.net/SuY7f/1/

此代码已使用Cordova PhoneGap 2.4.0进行测试

使用iScroll，jQuery Mobile Listview太慢了

3 个答案: