jQuery Mobile Scrollview

Question

Итак, я пытаюсь создать прокручиваемый список:

<div data-role="content-primary" class="list" style="height:100%; overflow:scroll" data-scroll="y">
    <ul data-role="listview" id="mainList" >
        <asp:Repeater ID="expList" runat="server" OnItemDataBound="expList_ItemDataBound" ClientIDMode="Static">
            <ItemTemplate>
                <li class="opener" runat="server" id="lItem" style="border-top: 1px solid rgb(200,200,200)">
                    <div id="divPic" runat="server" class="pic">
                        <h2><asp:Literal runat="server" ID="litName"></asp:Literal></h2>
                        <p><asp:Literal runat="server" ID="litDesc"></asp:Literal></p>
                        <input type="hidden" Id="brand" runat="server"/>
                        <input type="hidden" Id="cat" runat="server"/>
                    </div>
                </li>
            </ItemTemplate>
        </asp:Repeater>
    </ul>
</div>

заключено в: <.section class = "ex_list" style = "float: right; width: 70%; overflow: hidden"> tag

Я использую следующие скрипты:

http://jquerymobile.com/test/experiments/scrollview/jquery.mobile.scrollview.js

http://jquerymobile.com/test/experiments/scrollview/scrollview.js

В дополнение к jqm и jq. Проблема в том, что на ПК не работает прокрутка (но это не так уж и плохо), но на iPad весь сайт прокручивается в дополнение к просмотру списка. Пользователь также может прокручивать сайт НАД и видеть серый bg, пока сафари не прекратит прокрутку.

РЕДАКТИРОВАТЬ: Кроме того, эти 2 JS функция make 'toggleClass ()' jQuery не работает.

Answer 1

Я только что закончил реализацию этого на Android (2.2 и 3.2) и на iphone (не ipad) для правильной работы scrollview, вам нужно включить файл css и jquery замедление скрипт.

Сценарии должны быть включены в следующем порядке:

1. 1010 * JQuery *
2. jquery.mobile
3. jquery.easing
4. jquery.mobile.scrollview
5. Scrollview

Файл css дает вам полосы прокрутки, jquery.easing дает плавную анимацию (сам по себе впечатляющий проект), jquery.mobile.scrollview выполняет тяжелую работу, scrollview очищает страницу и добавляет достаточно разметка для просмотра прокрутки.

Я уверен, что мне не нужно говорить вам, что это «Экспериментально» по какой-то причине (причудливое поведение при прокрутке списка просмотра, оно также лишает возможности нажимать кнопки и текстовые области в браузере Chromium - Я не тестировал другие браузеры), однако обнаружил, что на мобильных устройствах с ним очень мало проблем Мне действительно нравится, что это позволяет мне постоянно держать вкладки вверху страницы. Вложение многих скролл-обзоров тоже довольно круто.

Не могу сказать, что заметил какие-либо проблемы с функцией toggleClass, однако это может быть связано с просмотром прокрутки и добавлением разметки.

ПРИМЕЧАНИЕ. Начиная с самой последней версии jQuery mobile rc2, кнопки и ввод текста должны работать.

EDIT

Начиная с jQuery Mobile 1.1.0, рекомендуется использовать фиксированные заголовки с использованием атрибута data-position="fixed" в верхнем или нижнем колонтитуле и полностью удалять scrollview.

Я попробовал это сам, и он работает намного лучше (для Android 2.2+ и iOS5 - ОС BlackBerry не проверялась мной, но в блоге утверждается, что она должна работать для BB7). Он работает быстрее и плавнее, чем решение js, и содержит меньше графических ошибок. Обязательно удалите все лишние js, css и все ссылки на data-scroll, поскольку это мешает / нарушает все.

Для неподдерживаемых версий и ОС вам все еще может понадобиться scrollview js / css и т. Д., Но по моему опыту места, которые не поддерживают фиксированные заголовки, были слишком медленными, чтобы запустить версию js в любом случае.

Answer 2

Хорошая тема здесь, хотел бы внести небольшую заметку:

Если вы хотите, чтобы серые области в Safari исчезали на мобильных страницах jQuery при прокрутке, вы можете использовать:

document.ontouchmove = function(e){
    e.preventDefault();
}

Также, что более важно, это позволит вам более эффективно работать с автономными базами данных, поскольку обычно пользовательский интерфейс (событие touchmove) прерывает функции SqlLite DB на мобильных устройствах, таким образом предотвращается прерывание.