5

我正在使用 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>

它很慢。我该如何解决？

4

3 回答 3

8

您可以从 jQuery Mobile 的样式表中删除-down和CSS 样式。-hover当您滚动列表时，您将手指“悬停”在列表项上，这会触发它根据-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），并删除-down和-hover类。

你可以在这里下载 jQuery Mobile：http: //jquerymobile.com/download/

基本上，查找所有的.ui-btn-***-*类声明并删除其中的代码***等于hover或down，并且会有倍数，因为每个主题都有一个，这就是最后一个*的用途，a-e。

完成后，上面的 CSS 将如下所示：

.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 {}

请注意，我对这个.ui-btn-up-a类没有做任何事情，它是默认类，我不想改变页面的外观，我只想在滚动列表时阻止浏览器重绘文档。

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

于 2012-01-25T18:02:43.863 回答
1

删除 .ui-btn-hover-x 和 .ui-btn-down-x 对我来说没有任何区别。

jquery.mobile-1.1.1

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

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

它的滚动就像 Safari 中的网页一样流畅。

于 2012-08-10T18:29:29.083 回答
1

看看 CSS3transform

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

这种行为似乎只发生在移动设备上。

我在这里做了一个提琴手，向您展示它是如何工作的：（使用移动设备查看差异） http://jsfiddle.net/SuY7f/1/

此代码使用 Cordova PhoneGap 2.4.0 测试

于 2013-03-01T11:38:08.697 回答