使用 android 的 jquerymobile 向左/向右滑动事件不起作用

Posted 2023-05-09

【中文标题】使用 android 的 jquerymobile 向左/向右滑动事件不起作用

【英文标题】：swipe left/right event not working using jquerymobile for android

【发布时间】：2014-03-01 11:04:06

【问题描述】：

我正在尝试使用滑动事件在页面之间导航，这是我的代码

$( 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 设备上无法正常工作，我们将不胜感激任何帮助

提前致谢

【问题讨论】：

我认为swipeleft 不是默认jQuery 的事件。您可能不得不为此使用其他库... hammarjs 是流行的。

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

查看 jquerymobile 文档中的演示：demos.jquerymobile.com/1.4.0/swipe-page

@QuickFix 事件演示效果不佳

其实我注意到滑动行为很大程度上取决于android的版本。

【参考方案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代码 (

<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>

)

【参考方案2】：

你可以试试这个：

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

到这里：

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