jquery-ui – 使用iScroll,jQuery Mobile Listview太慢了

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

<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>

您可以从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,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,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}*/);
}

updatE

所以为了进行更改,我建议它就像下载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 – *** – *类声明并删除***等于悬停或向下的那些代码,并且会有倍数,因为每个主题都有一个,这就是什么最后的*是,ae.

当你完成时,上面的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,#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样式表的缩小版本(这将大大减少代码的大小).