¿Aplicar Touch Swipe en una sola página, la página que se utiliza para cargar datos dinámicamente?

He utilizado una sola página en la que los datos se carga una y otra vez.

Se utiliza una misma página para cargar datos; Es decir, título, foto y descripción. ¿Puede usted ayudarme para que pueda aplicar la función de golpe en ella? Estoy creando una aplicación como Pulse News para comprobarlo en la función de deslizar. Lo he construido en phonegap, HTML5, CSS3 y JavaScript y también jQuery móvil.

Sé cómo para deslizar las páginas, donde hay más de una página, pero sólo hay una página en la que los datos se carga de forma dinámica y sólo el contenido se cambia, así que ¿cómo debo añadir deslizar para que funcione en el iPhone y Android ?

No importa cuántas páginas tenga en su aplicación. Necesita detectar la acción SWIPE en su actividad y recargar los datos en lugar de pasar realmente páginas. Para hacer eso: en su detector de eventos táctiles, detecte:

ACTION_MOVE

Me gusta esto:

If (event.getAction ()! = MotionEvent.ACTION_MOVE)

Incluso comprobar la distancia para asegurarse de que un SWIPE sucedió:

switch(event.getAction()) { case MotionEvent.ACTION_DOWN: if(isDown == false) { startX = event.getX(); startY = event.getY(); isDown = true; } Break; case MotionEvent.ACTION_UP { endX = event.getX(); endY = event.getY(); break; } } 

Calcular la distancia entonces, si suena como más de un clic … lo consideran un golpe y recargar sus datos buena suerte

Echa un vistazo a Hammer.js ( http://eightmedia.github.io/hammer.js/ ) tal vez lo hará más fácil para usted!

 Hammer(el).on("swipeleft", function() { //code to run when user uses swipes left }); 

Creo que es posible que desee considerar el uso de un diseño de varias páginas o un panel y la transición entre ellos con el gesto de deslizamiento.

http://view.jquerymobile.com/1.3.0/docs/widgets/pages/#Multi-pagetemplatestructure

Compruebe el código para el cuadro de diálogo de la diapositiva de jQueryMobile aquí – http://view.jquerymobile.com/1.3.0/docs/widgets/transitions/

De la documentación de jQuery Mobile 1.3.0 para $.mobile.changePage

Opciones (objeto, opcional) Propiedades:

allowSamePageTransition(boolean, default: false)

De forma predeterminada, changePage () ignora las peticiones para cambiar a la página activa actual. Esta opción a true, permite ejecutar la solicitud. Los desarrolladores deben tener en cuenta que algunas de las transiciones de página suponen que las páginas fromPage y toPage de una petición de changePage son diferentes, por lo que no pueden animarse como se esperaba. Los desarrolladores son responsables de proporcionar una transición adecuada o desactivarla para este caso específico.

Parece que puede haber algunos errores con esto dependiendo de la versión de jQuery.Mobile que está utilizando.

En primer lugar, ur Activity implementa OnTouchListener y luego devuelve el detector de gestos, es decir, como sigue

 public boolean onTouch(final View view, final MotionEvent motionEvent) { // TODO Auto-generated method stub return gestureDetector.onTouchEvent(motionEvent); } 

entonces ahora

 urpage.setOnTouchListener(this); 

En el método onCreate

Siguiente

Crear una clase llamada GestureListener en ese

 private final class GestureListener extends SimpleOnGestureListener { private static final int SWIPE_THRESHOLD = 100; private static final int SWIPE_VELOCITY_THRESHOLD = 100; @Override public boolean onDown(MotionEvent e) { return true; } @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { boolean result = false; try { float diffY = e2.getY() - e1.getY(); float diffX = e2.getX() - e1.getX(); if (Math.abs(diffX) > Math.abs(diffY)) { if (Math.abs(diffX) > SWIPE_THRESHOLD && Math.abs(velocityX) > SWIPE_VELOCITY_THRESHOLD) { if (diffX > 0) { //dynamic load the page which you want when the user swipes left side } else { //dynamic load the page which you want when the user swipes right side } } } } catch (Exception exception) { exception.printStackTrace(); } return result; } 

AngularJS 1.2 también tiene incorporadas funciones de deslizar. Tal vez vale la pena comprobarlo.

Puede modificar este código de acuerdo a su requerimiento.

  $("#pageID-1").on("swiperight", function() { $.mobile.changePage("#pageID-2", {transition: "slide",reverse: false}); getDateienData(); // load data dynamically on page '#pageID-2' when swipe page '#pageID-1'. }); 
  • Cómo detectar sólo el navegador nativo de Android
  • Swipeleft / swiperight activado durante el desplazamiento vertical en jQuery móvil
  • Problema - blockWebkitDraw lockedfalse
  • Phonegap, conexión al servidor sin éxito
  • Jquery móvil - keydown keydown en dispositivos móviles
  • Es la navegación en la memoria del teléfono de Android posible utilizando phoengap?
  • Phonegap, jQueryMobile y servicio web
  • Phonegap + Jquery móvil en Android: varias páginas HTML Javascript no funciona
  • Mejores prácticas phonegap architecture
  • El tacto de la firma de la lona crea la edición en teléfono
  • Cómo deshabilitar el botón de retroceso del teléfono en Android con Jquerymobile, PhoneGap
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.