jQuery Mobile Listview用iScroll太慢了
https://stackoverflow.com/questions/9006278
-
14-11-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我正在使用PhoneGap1.3.0和Jquery Mobile1.0制作应用程序。要滚动a 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 type 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>
它很慢。我该如何修复它？
解决方案
您可以删除 -down 和 -hover 来自jquery Mobile的样式表的CSS样式。当你滚动一个列表时，你的手指"悬停"在一个列表项上，它会触发它来改变它的样式。 -hover 应用的类。如果你改变 -hover 类与 -up 类，则不会发生重绘，滚动会平滑得多。我已经测试了这个，它在我的Android2.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样式表的缩小版本（这将大大减少代码的大小）。
其他提示
移走。ui-btn-hover-x和。ui-btn-down-x对我来说没有任何区别。
jquery的。移动-1.1.1
删除内容包装器为我修复了它。
<div data-role='content'> </div>
它滚动就像safari中的网页一样流畅。
查看CSS3 transform
启用硬件加速后，带有iScroll的jqm listview正在滚动，就像现在坐在黄油上一样。
这种行为似乎只发生在移动设备上。
我在这里做了一个小提琴手来告诉你它是如何工作的:（使用移动设备查看差异） http://jsfiddle.net/SuY7f/1/
此代码使用Cordova PhoneGap2.4.0进行测试
