jQuery Mobile ListView работает слишком медленно с iScroll - PullRequest
Новая
       30

jQuery Mobile ListView работает слишком медленно с iScroll

5 голосов
/ 25 января 2012

Я делаю приложение с 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 like. 

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

Это медленно. Как я могу это исправить?

Ответы [ 3 ]

8 голосов
/ 25 января 2012

Вы можете удалить стили CSS -down и -hover из таблицы стилей для jQuery Mobile. Когда вы прокручиваете список, вы «наводите» пальцем на элемент списка, который вызывает его изменение стиля из-за примененного класса -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}*/);
}

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-***-* и удаляйте код внутри тех, где *** равен 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, готовую для производственной среды (это значительно уменьшит размер кода).

1 голос
/ 01 марта 2013

Просмотр CSS3 transform

При включенном аппаратном ускорении просмотр списка jqm с помощью iScroll прокручивается так, как будто он сейчас на ходу.

Такое поведение наблюдается только на мобильных устройствах.

Я сделал скрипач, чтобы показать вам, как он работает: (Используйте мобильное устройство, чтобы увидеть разницу) http://jsfiddle.net/SuY7f/1/

Этот код протестирован с Cordova PhoneGap 2.4.0

1 голос
/ 10 августа 2012

удаление .ui-btn-hover-x и .ui-btn-down-x для меня не имело никакого значения.

jquery.mobile-1.1.1

удаление оболочки содержимого исправило это для меня. 

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

он прокручивается так же гладко, как веб-страница в сафари.

...