我正在使用jQuery mobile 1.3.2,我为滑动事件添加了钩子。对于每次滑动事件,我都会向左/右滑动note_container。但是,滑动事件的注册在三星Galaxy S3(以及其他Android设备)上是间歇性/无响应的,但在iPhone上运行良好。有什么特别的原因吗?
<html>
<head>
<meta charset="utf-8" />
<title>Notoji</title>
<meta name="viewport" content="width=device-width, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.css"/>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js"></script>
<script>
$(document).ready(function(){
width = $('.note').first().width();
$('.note_container').bind('swipeleft', swipe_note_left);
$('.note_container').bind('swiperight', swipe_note_right);
function swipe_note_left(){
alert("left swiped");
left_val = $('.note_container').offset().left;
adjusted_left = left_val - width;
$('.note_container').animate({left: adjusted_left, useTranslate3d:true}, 250);
}
function swipe_note_right(){
alert('right swiped');
left_val = $('.note_container').offset().left;
adjusted_left = left_val + width;
$('.note_container').animate({left: adjusted_left, useTranslate3d:true}, 250);
}
})
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<div class="title"> Notoji</div>
</div>
<div data-role="content" class="content review">
<div class="note_container">
<div class="note">
<div class="note_text">Its my birthday, and I have treated myself to a very nice gift.</div>
<img class="sticker" src="/assets/sally/sally_04.png"/>
</div>
<div class="note">
<div class="note_text">The rogue defender. Killer the wrestler bunny.</div>
<img class="sticker" src="/assets/killer/killer_01.png"/>
</div>
</div>
<a href="create.html" data-transition="slideup" data-inline="true">
<span class="create"></span>
</a>
</span>
</div>
</div>
</body>
您可以在此处测试代码:http://jsbin.com/UPoparU/1/
答案 0 :(得分:2)
我遇到了同样的问题,并且发现touchmove(或至少与touchmove有关的东西)导致了问题。即使是最轻微的上/下动作也会触发页面滚动,并且由于某种原因会取消滑动。
要快速测试touchmove是否是原因,您可以通过在身体末端执行此操作来禁用touchmove:
<script>
$(document.body).on('touchmove', function(event) {
event.preventDefault();
event.stopPropagation();
});
</script>
这使得滑动对我来说非常好用,但当然它禁用滚动(我需要滚动,所以它不是我的解决方案),但也许你可以不滚动?或者可能弄清楚具体的错误或其他一些解决方法。无论如何,我知道这不是一个合适的解决方案,但我认为它可能有用。
答案 1 :(得分:0)
我也遇到过这个问题,在Galaxy S3上使用Jquery mobile和Cordova。我最终使用了这个第三方库并清理了它: