Как использовать iScroll4 с SwipeView? - PullRequest
Новая
       46

Как использовать iScroll4 с SwipeView?

3 голосов
/ 22 февраля 2012

Я использую iScroll4 для создания эффекта горизонтальной прокрутки изображения на мобильном веб-сайте. iScroll работает великолепно, но проблема в том, что изображение, содержащееся в оболочке iScroll, отключает встроенную вертикальную прокрутку. Другими словами, прикосновение пальца пользователя для навигации по странице отключено в любом месте обернутого изображения iScroll.

SwipeView может решить эту проблему, но документация (по крайней мере для меня) не так понятна. Кто-нибудь знает, как эффективно использовать SwipeView на обернутом изображении iScroll?

Ответы [ 2 ]

3 голосов
/ 31 августа 2012

Извините, что в значительной степени воспроизведите уже сделанный ответ - но мне нужно вставить код в другое место.

Пример Аластера для меня не совсем сработал. Версия iScroll, которую я скачал, похоже, не поддерживает сопоставление с классом, ей нужен объект. Так как в моем проекте уже есть jQuery, я использовал его для передачи активного элемента. 

scroller = new iScroll($('.swipeview-active')[0], {
  hScroll: false,
  lockDirection: true,
  hideScrollbar: true,
  fadeScrollbar: true
});

Я добавил это в конец функции carousel.onFlip() из примера в demo / inline / test.html в загрузке для http://cubiq.org/swipeview

Не проводил расширенное тестирование - это просто то, на что я смотрю, сравнивая комбинацию используемых библиотек, но она работает, как и следовало ожидать в Chrome, используя код выше.

РЕДАКТИРОВАТЬ Только что протестировано в мобильном сафари на iphone тоже ссылка здесь https://dl.dropbox.com/u/81328343/scroll/test.html

Единственное (не уверен, хорошо это или плохо, зависит от варианта использования), это то, что при возврате к слайду он переходит обратно наверх.

2 голосов
/ 06 июля 2012

Я обнаружил, что документации также ужасно не хватает, но что-то вроде этого работает для меня: 

function swipeView(wrapper){
        wrapper = new SwipeView('#wrapper', {
        numberOfPages: pages.length
    });

    wrapper.onFlip(function(){
        scroller = new iScroll('.swipeview-active', {
            hScroll: false,
            lockDirection: true
        });
    });
}

Это инициализирует iScroll на вашей текущей странице SwipeView после перехода по ней.Горизонтальная прокрутка iScroll отключена, и это событие остается доступным для SwipeView, а направление блокируется, поэтому, пока выполняется вертикальное пролистывание (iScroll), изменение направления прокрутки пользователя не приведет к следующей странице SwipeView.Без этих опций можно сделать странный горизонтальный удар.

...