jquery mobile - demos - changePage "salta" a la página anterior

jquery mobile panels (6)

Estaba teniendo exactamente el mismo problema tanto en Android como en iOS. Para mí, estaba sucediendo para páginas pesadas , es decir, páginas con elementos complejos, etc. Parece que estás usando la transición "deslizante", que era lo que estaba usando también. Sacar las transiciones de página (es decir, $ .mobile.changePage ("page.html", {transition: "none"})) para esas páginas resolvió este problema para mí. Espero que esto ayude.

Si desea conservar la transición, puede intentar precargar la página primero cuando se muestra la página anterior, utilizando $ .mobile.loadPage y luego mostrar la transición. Yo mismo estoy explorando esta ruta, pero probablemente valga la pena intentarlo.

Editar: OK - Exploré la última sugerencia y parece que no funciona. Se quedará con la primera opción.

Tengo un gran problema con una aplicación móvil jQuery: estoy usando funciones personalizadas (están activadas por onClick) para cambiar la página con currentPage.

Solo ocurre en dispositivos con Android en sitios en los que ha cambiado (debido a solicitudes de Ajax) con el navegador integrado. iOS y Chrome funcionan bien.

Después de hacer clic en un elemento, la animación comenzó, pero justo antes de que termine, vuelve a la página anterior. Después de medio segundo, vuelve a cambiar a lo nuevo.

Hice una película del error aquí: http://www.youtube.com/watch?v=sXxvVUxniNg

Muchas gracias

Código (CoffeeScript):

class Guide @categoriesLoaded = false @loadSearch: -> $.mobile.changePage $("#guide"), transition: ''slide'' changeHash: false if !@categoriesLoaded @categoriesLoaded = true GuideApi.getCategories (data) -> output = Mustache.render $("#tmpl-guide-categories-select").html(), categories: data $("#guide-search-category").append output $("#guide-search-category").val($("#guide-search-category option:first").val()); window.WgSwitchGuide = -> Guide.loadSearch

¿Intentaría agregar los métodos stopPropagation y PreventionDefault del evento en el evento click de la primera página? De esta forma, la acción predeterminada del evento click no se activará. Además, stopPropagation impide que el evento burbujee en el árbol DOM, lo que impide que se notifique a ningún controlador principal del evento.

event.stopPropagation();
event.preventDefault();

Ejemplo:

$("p").click(function(event){ event.stopPropagation(); event.preventDefault(); // change page });

¿Cuál es su versión de JQM y Android?

No estoy seguro si lo entiendo correctamente. Creo que el parpadeo de la transición puede venir de la siguiente suposición.

Transición DOM de página pesada.
Usando "translate3d" en algún lugar del archivo css.
No se usa la función "H / W Acceleration". Habilítelo agregue esta línea a su AndroidManifest.xml en <application>

android: hardwareAccelerated = "true"

Yo estaba teniendo el mismo problema. Y probé todo, finalmente termino con la solución. Lo que encontré fue que el error se encontraba principalmente dentro del navegador. Entonces configuré la configuración de pushStateEnabled como falsa. Lo hice haciendo lo siguiente, agregando este script.

<script type="text/javascript"> $(document).bind("mobileinit", function(){ $.mobile.pushStateEnabled = false; }); </script>

Se debe agregar antes de que se llame al script jquery-mobile, para obtener más información, puede verlo en la descripción de JQuery.

Y resolvió el problema no más saltando hacia atrás.

Después de intentar durante semanas encontrar una solución a esto, terminé revisando la biblioteca JQM para desactivar las transiciones de página una tras otra. No es una buena solución, pero es lo único que puedo hacer para trabajar.

Obtenía páginas saltando tanto en $ .mobile.changePage como en enlaces de anclaje. Usé la transición de diapositivas, pero eliminarla no solucionó el problema. Establecer pushStateEnabled en falso tampoco funcionó. Los saltos estaban sucediendo en todos los dispositivos y navegadores (que probé, de todos modos).

Así que esto es lo que hice a la biblioteca de JQM (v1.3.2).

Antes de que se defina la función $ .mobile.changePage, agregué:

var justChangedPage = false;

Luego dentro de la función hay una línea que dice:

if ( pbcEvent.isDefaultPrevented()) { return; }

que cambié a:

if ( pbcEvent.isDefaultPrevented() || justChangedPage) { return; }

Luego, justo después de esta parte de la función $ .mobile.changePage:

if ( toPage[ 0 ] === $.mobile.firstPage[ 0 ] && !settings.dataUrl ) { settings.dataUrl = documentUrl.hrefNoHash; }

Yo añadí:

justChangedPage = true; setTimeout(function() { justChangedPage = false; }, 500);

(Poner eso antes en la función no funcionó; todo eso se ejecuta más de una vez en una sola transición de página. Y medio segundo parecía ser el tiempo de espera mínimo que impedía que la página saltara).

Espero que esto ayude a alguien incluso si es un hack ...

Encontré exactamente el mismo comportamiento y parece que pocas personas tienen el mismo problema. Al principio, pensé que era causado por la biblioteca móvil jQuery. Más tarde, logro encontrar de dónde vino el problema y es un error en mi propio código. Hice una demostración para explicar el problema.

http://jsfiddle.net/pengyanb/6zvpgd4p/10/

Con suerte, esto puede ser una pista para personas que tienen el mismo problema.

$(document).on(''pagebeforeshow'', ''#page2'', function(){ console.log(''Page2 before show''); var htmlGeneratedOnTheFly = ''<ul data-role="listview" data-inset="true">''; for(var i=0; i<4; i++) { htmlGeneratedOnTheFly += ''<li><a>Random html element</a></li><li data-role="list-divider"></li>''; } htmlGeneratedOnTheFly += ''</div>''; $(''#page2UiContent'').empty(); $(''#page2UiContent'').append(htmlGeneratedOnTheFly); $(''#page2UiContent'').trigger(''create''); ////////////////////////////////////////////////// //The following section is where the bug is generated. //Each on "page2 before show event" will add a OK Button click handler. //The handlers never get cleared. //More and more handler is added to the Page2 OK button as pages going back and forth. //Open the browser''s console window to see multiple "Page 2 OK Button clicked!!!" lines on one button click. //To fix the bug, move the following section out of the $(document).on(''pagebeforeshow'', ''#page2'', function(){}); ////////////////////////////////////////////////// $(''#page2OkButton'').click(function(){ console.log("Page 2 OK Button clicked!!!"); $.mobile.changePage(''#page1'', {transition:"flip"}); }); ////////////////////////////////////////////// ////////////////////////////////////////////// });