Question

swipeleft和swiperight在Google Chrome 37浏览器上运行良好，但是当我在Android 4.1.2设备上测试时，它的反应非常迟钝。

我需要添加什么才能在Android硬件设备上实现滑动功能？

$(document).on('swipeleft', '.ui-page', 

function(event)
{    
    if(event.handled !== true) // This will prevent event triggering more then once
    {    
        var nextpage = $(this).next('[data-role="page"]');
        // swipe using id of next page if exists

        if( nextpage.length > 0) 
        {
// alert("Swipe Left");
$.mobile.pageContainer.pagecontainer( "change", nextpage, {transition: "slide", reverse: false} );              

        }
        event.handled = true;
    }
    return false;         
}                       ) // And so on.....   Entire code in the jsfiddle

我搜索了Stack Overflow和Internet，发现了这个链接

https://github.com/jquery/jquery-mobile/issues/5534

它说它应该可以在Chrome 36上运行。我的Chrome是37，而且它没有完成它。 TNT-SHIM使我的整个应用程序完全停止工作。

我想知道马克扎克伯格是对的。起初他正在使用HTML5为他的facebook手机全押，但他意识到它有它的缺点，现在iOS和Android facebook应用程序都是原生的。

我同意原生应用程序是构建激烈游戏时的方法，但我认为对于简单的2D游戏和非游戏应用程序来说，没有必要......

Answer 1

在Android上似乎有关于错误滑动的持续问题。

以下是（开放）issue for jquery-mobile和another for ionic，表明jquery mobile并不特别。

我有一个基于jquery-mobile的cordova应用程序，并且刷卡在iOS上运行良好且可靠。然而，在Android上我发现它非常不可靠 - 仅每五次触发一次水平滑动事件（例如）（运行Nexus 7，Android 4.4.4，Jquery Mobile 1.4.4，Cordova 3.6.3））。

我的解决方案一直在为滑动事件添加hammer.js，但似乎效果很好。

Answer 2

我在android 4上使用了它，它为我做了，希望这有帮助

function onDeviceReady() {
            // set your swipe threshold explicitly
            $.event.special.swipe.horizontalDistanceThreshold = 5;
            $(document).on("swiperight", "#listitem", function() {
                $.mobile.changePage("#page1");
            });
        }

Answer 3

@Vlad的答案在我的正确轨道上，除了5个阈值产生无关的taphold事件，而值10的效果很好。

根据default swipe handling code provided here，您可以定义自己的滑动测试页面，例如：

    $.event.special.swipe.horizontalDistanceThreshold = 10;

    $.event.special.swipe.handleSwipe = function( start, stop ) {
        $("#about-start").html("x: " + start.coords[ 0].toString() + "y: " + start.coords[1].toString());
        $("#about-stop").html("x: " + stop.coords[ 0].toString() + "y: " + stop.coords[1].toString());
        $("#about-delta-x").html("delta-x: " + (stop.coords[0]-start.coords[0]).toString());
        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" );
        }
    };

    $(document).on("tap swipeleft swiperight taphold vclick", "#about-page", function(event) {
        $("#about-event").html(event.type);
        if (event.type=='tap') {
            $("#about-start").html('');
            $("#about-stop").html('');
            $("#about-delta-x").html('');
        }
    });

尽管如此，这个实验页面显示阈值不是真正的问题，尽管它可能是一种解决方法。在纹波仿真器上，只要您单击并拖动就会看到停止x值增加，而在真实设备（Android 4.4.2）上，只需调用$ .event.special.swipe.handleSwipe在我的情况下，距离在15到30之间，即使我拖动滑动更长时间。

Answer 4

移动设备上的大多数Facebook应用程序仍然是HTML5不放松的信念。
使用Jquery mobile，您可以使用如下方法轻松浏览页面：

 $("#article2").on("swiperight",function(){
    $.mobile.changePage( "#article1", { transition : "slide", reverse: true});
});
$("#article2").on("swipeleft",function(){
    $.mobile.navigate( "#article3", { transition : "slide"});
});

希望这有帮助。

使用PhoneGap / Cordova在硬件设备上滑动jQuery Mobile

4 个答案: