javascript - ¿Cómo usar iScroll4 con SwipeView?

mobile

Question

Estoy usando iScroll4 para crear un efecto de desplazamiento horizontal en una imagen dentro de un sitio web móvil. iScroll funciona de maravilla, pero el problema es que la imagen contenida en el envoltorio de iScroll deshabilita el desplazamiento vertical nativo. En otras palabras, el deslizamiento de dedo de un usuario para navegar por la página se desactiva en cualquier lugar dentro de la imagen envuelta iScroll.

SwipeView puede resolver este problema, pero la documentación (al menos para mí) no es tan clara. ¿Alguien sabe cómo usar SwipeView de manera efectiva en una imagen envolvente de iScroll?

Answer 1

He encontrado que la documentación es terriblemente deficiente también, pero algo como esto me funciona:

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

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

Esto inicializa iScroll en su página SwipeView actual al deslizar hacia ella. Horizontal iScroll-scrolling está deshabilitado, lo que deja ese evento disponible para SwipeView y la dirección está bloqueada, por lo que mientras un deslizamiento vertical (iScroll) está en progreso, un cambio en la dirección del deslizador del usuario no pasará a la siguiente página SwipeView. Sin esas opciones, uno puede hacer un deslizamiento horizontal extraño.

Answer 2

Lamento reproducir la respuesta que ya se ha hecho, pero necesito pegar un código en un espacio diferente.

El ejemplo de Alastair no funcionó para mí. La versión de iScroll que descargué no parecía apoyar la coincidencia de una clase, quería un objeto. Entonces, como mi proyecto ya tiene jQuery, lo utilicé para pasar el elemento activo.

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

Añadí esto al final de la función carousel.onFlip() del ejemplo en demo / inline / test.html en la descarga para http://cubiq.org/swipeview

No he hecho pruebas extendidas; esto es algo que estoy mirando un poco al comparar la cominbación de bibliotecas para usar, pero está funcionando como es de esperar en Chrome usando el código anterior.

EDITAR Acaba de probarse en safari móvil en el iPhone también enlace aquí https://dl.dropbox.com/u/81328343/scroll/test.html

Lo único (no estoy seguro de si es bueno o malo, depende del caso de uso) es que al volver a una diapositiva, salta de nuevo a la parte superior.