swipe function not working using jquerymobile and phonegap for android

问题

I am new to the phonegap .i am creating application in eclipse using phonegap for android .I added phone gap.jar and plugin in xml folder.I have added jquery library and phonegap1.1.0 js also. am trying to implement swipe function to navigate one page to another page but its not working .can anybody tell how to solve the problem?

I am calling in inex.html in my activity this is my index.html

<html>
    <head>
        <title>sample check</title>
        <link rel="stylesheet" href="www/jquery.mobile/jquery.mobile-1.0rc2.min.css" type="text/css" charset="utf-8" />

        <script type="text/javascript" src="js/fnswipe.js"></script>
        <script type="text/javascript" src="www/jquery.mobile/jquery-1.6.4.min"></script>
        <script type="text/javascript" src="www/jquery.mobile/jquery.mobile-1.0rc2.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
    </head>
    <body>
        <div data-role="page" id="home">  
            <div data-role="content"> 
                <p> 
                    <ul data-role="listview" data-inset="true" data-theme="c"> 
                        <li id="listitem">Swipe Right to smple check page</li> 
                    </ul> 
                </p> 
            </div> 
        </div> 
    </body>
</html>

This is my js file included

$("#listitem").swiperight(function() { 
    $.mobile.changePage("file:///android_asset/www/samplecheck.html"); 
});

Thanks for your help

回答1:

I was having the same issue, all swipe events were working except for on Android. To solve the issue I had to set the Threshold values for the Swipe events. You can set them just before you call your swipe events in your JS file. For best results I have mine set to:

$.event.special.swipe.scrollSupressionThreshold = 10; // More than this horizontal displacement, and we will suppress scrolling.
$.event.special.swipe.horizontalDistanceThreshold = 30; // Swipe horizontal displacement must be more than this.
$.event.special.swipe.durationThreshold = 500;  // More time than this, and it isn't a swipe.
$.event.special.swipe.verticalDistanceThreshold = 75; // Swipe vertical displacement must be less than this.

This answer helped me a lot : swipeleft/swiperight triggered during vertical scroll in jquery mobile

As well as the documentation: Events -> Touch Events -> Swipe

Hope this helps!!

回答2:

Try the code similar to this and see if it helps in any way.

function( event ) {
  var data = event.originalEvent.touches ?
      event.originalEvent.touches[ 0 ] : event;
  return {
      time: ( new Date() ).getTime(),
      coords: [ data.pageX, data.pageY ],
      origin: $( event.target )
    };
}
)

And the when the swipe stops (

function( event ) {
  var data = event.originalEvent.touches ?
      event.originalEvent.touches[ 0 ] : event;
  return {
      time: ( new Date() ).getTime(),
      coords: [ data.pageX, data.pageY ]
    };
}
)

This method receives the start and stop objects and handles the logic for and triggering for the swipe events.

(

function( start, stop ) {
  if ( stop.time - start.time < $.event.special.swipe.durationThreshold &&
    Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.swipe.horizontalDistanceThreshold &&
    Math.abs( start.coords[ 1 ] - stop.coords[ 1 ] ) < $.event.special.swipe.verticalDistanceThreshold ) {

    start.origin.trigger( "swipe" )
      .trigger( start.coords[0] > stop.coords[ 0 ] ? "swipeleft" : "swiperight" );
  }
}
)

HTMl code (

<script>
$(function(){
  // Bind the swipeHandler callback function to the swipe event on div.box
  $( "div.box" ).on( "swipe", swipeHandler );

  // Callback function references the event target and adds the 'swipe' class to it
  function swipeHandler( event ){
    $( event.target ).addClass( "swipe" );
  }
});
</script>

回答3:

you can try this

$("#listitem").on("swiperight", function() { 
    $.mobile.changePage("file:///android_asset/www/samplecheck.html"); 
});

回答4:

I'm using jquery mobile 1.2.0 to swipe the page. This function doesn't depend upon phonegap or cordova. This is my working code. Hope this will help you:

$(document).bind("pageinit", function(event) {
    $('#page').unbind("swipeleft");
    $("#next").unbind("swiperight");

     $("#page").bind("swipeleft",function(event) {
        $.mobile.changePage('next.html',  {
            transition : "slide"
        });
     });

     $("#next").bind("swiperight",function(event) {
        $.mobile.changePage('index.html', {
            transition : "slide",
            reverse : true  
        });
     });
});

来源：https://stackoverflow.com/questions/9003977/swipe-function-not-working-using-jquerymobile-and-phonegap-for-android

标签

jquery

jquery-mobile

cordova

swipe