использование iscroll с проблемой мобильного связывания jquery - PullRequest
Новая
       22

использование iscroll с проблемой мобильного связывания jquery

3 голосов
/ 11 октября 2011

Я сейчас пытаюсь заставить Iscroll 4 работать с jQuery Mobile.

Все работает нормально, если я отключаю навигацию по умолчанию JJM ajax, но я хотел бы сохранить это.

Моя проблема в том, что я не могу понять, как успешно вызвать / связать iscroll, чтобы он работал со страницами, которые в них нуждаются. Я пробовал pageinit () и pagecreate () безрезультатно.

Базовый пример этого можно найти здесь: http://bit.ly/ngXkNR

Любые указатели высоко ценятся.

A.

Ответы [ 2 ]

7 голосов
/ 25 ноября 2011

Спасибо, Джаспер, Я немного изменил ваш метод, чтобы вы могли вызывать iScroll для любой оболочки, идентифицируемой с классом. Также я выгружаю и уничтожаю все экземпляры iScroll в событии pagehide - мне не нужен метод refresh для моих нужд: 

// iScroll variable
var myScroll = [];

$(document).delegate('[data-role="page"]', 'pageshow', function () {

    var $page = $(this);

    // setup iScroll
    $($page.find('.iscroll_wrapper')).each(function(index) {

        var scroller_id = $(this).get(0);

        myScroll.push(
            new iScroll(scroller_id, {
                snap       : true,
                momentum   : false,
                hScrollbar : false
            }));
    });

});

$(document).delegate('[data-role="page"]', 'pagehide', function () {

    // unset and delete iScroll
    for (x in myScroll)
    {
        myScroll[x].destroy();
        myScroll[x] = null;
        myScroll.splice(x, 1);
    }

});
6 голосов
/ 11 октября 2011

Следуйте примеру, который я создал для вас четыре дня назад ( с использованием iscroll с jquery mobile ) ... Вы связываетесь с событием, которое срабатывает только при начальной загрузке страницы, и вы хотите привязать к Событие jQuery Mobile, которое запускается при добавлении новой страницы в DOM.

Изменение: 

var myScroll;
document.addEventListener('DOMContentLoaded', loaded, false);

Кому: 

var myScroll = [];
$(document).delegate('[data-role="page"]', 'pagecreate', function () {
        myScroll[this.id] = new iScroll(this.id + '_wrapper', {
        snap: true,
        momentum: false,
        hScrollbar: false
     });
});

Что потребует переименования элемента wrapper на каждой странице в _wrapper. Что в любом случае необходимо, потому что каждому элементу с идентификатором требуется уникальный идентификатор в DOM.

Ссылка: с использованием iscroll с jquery mobile

- ОБНОВЛЕНИЕ -

Я создал пример использования каруселей iScroll на нескольких страницах. Обратите внимание, как я включаю пользовательские JavaScript и CSS на каждой странице, чтобы, если пользователь обновляет страницу (на любой странице), он не получал никаких ошибок из-за отсутствующего кода.

Вот ссылка на рабочий пример: http://apexeleven.com/stackoverflow/iScroll/default.html

...