使用jQueryMobile在安卓设备上左右滑动事件无法工作。

Question

我正在尝试使用滑动事件在页面之间进行导航，以下是我的代码。

$( document ).on( "swipeleft", page, function() { 
   $.mobile.changePage( "#"+next, { transition: "slide" },false ); 
}); // Navigate to next page when the "next" button is clicked 
$( ".control .next", page ).on( "click", function() { 
   $.mobile.changePage( "#"+next, { transition: "slide" },false ); 
});

但是在Android设备上，滑动功能不能正常工作，请帮助解决问题，非常感谢。

提前致谢。

- Samir

---

我认为swipeleft不是默认的jQuery事件。你可能需要使用其他库来实现它... hammarjs是一个流行的选择。 - Ashish Kumar

"jQuery.mobile.changePage"自jQuery Mobile 1.4.0起已被弃用，并将在1.5.0中删除。请改用pagecontainer小部件的change()方法。 - Jai

请查看jQuery Mobile文档中的演示：http://demos.jquerymobile.com/1.4.0/swipe-page/ - QuickFix

@QuickFix的演示效果非常差。 - Maurice Perry

实际上，我注意到滑动行为很大程度上取决于Android的版本。 - QuickFix

Answer 1

这是开始滑动的标记：（

）

。

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 )
    };
}

)

当滑动停止时：(

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

)

这个方法接收起始和结束对象，并处理触发滑动事件的逻辑。

(

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>

)

- user3270453

Answer 2

你可以试试这个：

$.mobile.changePage( "#"+next, { transition: "slide" },false ); 
//----------put changehash inside this--------------^^--^^^^

转换为：

$.mobile.changePage( "#"+next, { transition: "slide", changeHash: false });

- Jai