使用 android 的 jquerymobile 向左/向右滑动事件不起作用
Posted
技术标签:
【中文标题】使用 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 );
【讨论】:
以上是关于使用 android 的 jquerymobile 向左/向右滑动事件不起作用的主要内容,如果未能解决你的问题,请参考以下文章
使用 PhoneGap/jQuery Mobile 以编程方式在 iPhone/Android 日历中添加事件?
Phonegap,jQuery Mobile,Android,文本输入后不再固定工具栏
文档 pageinit 在 iOS (jQueryMobile) 上多次触发