1

我正在使用 jQuery mobile 1.3.2，并为滑动事件添加了钩子。对于每个滑动事件，我都在向左/向右滑动 note_container。然而，滑动事件的注册在三星 Galaxy S3（和其他安卓设备）上是间歇性的/没有响应，但在 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/

4

2 回答 2

2

我有同样的问题，并发现 touchmove（或至少与 touchmove 相关的东西）导致了问题。即使是最轻微的向上/向下运动也会触发页面滚动，并且由于某种原因取消了滑动。

要快速测试 touchmove 是否是原因，您可以通过在正文末尾执行此操作来禁用 touchmove：

<script>
    $(document.body).on('touchmove', function(event) {
        event.preventDefault();
        event.stopPropagation();
    });
</script>

这使得滑动对我来说效果很好，但它当然会禁用滚动（我需要滚动，所以它不是我的解决方案），但也许你可以不滚动？或者也许找出特定的错误或其他解决方法。无论如何，我知道这不是一个合适的解决方案，但我认为它可能有用。

于 2013-10-11T14:16:27.457 回答
0

我也遇到了这个问题，在 Galaxy S3 上使用 Jquery mobile 和 Cordova。我最终使用了这个第三方库并将其清除：

http://www.codingjack.com/playground/swipe/

于 2014-09-07T22:49:27.473 回答