Jquery Mobile 1.4 使用移动设备在 Chrome 中滑动演示

Question

我的问题涉及带有 Chrome 的移动设备（我使用的是 Nexus 7）上的滑动事件。我正在开发 Jquery Mobile 1.4.2 演示，可以在这里找到：

http://demos.jquerymobile.com/1.4.2/swipe-page/

我会问我的问题并复制下面的示例 javascript。我可以在我的笔记本电脑（使用 Chrome）和我的平板电脑（使用 Firefox）上让一切正常工作，但在我的平板电脑上的 Chrome 中滑动可能有十分之一。有什么建议吗？谢谢！

// Pagecreate will fire for each of the pages in this demo
// but we only need to bind once so we use "one()"
$( document ).one( "pagecreate", ".demo-page", function() {
    // Initialize the external persistent header and footer
    $( "#header" ).toolbar({ theme: "b" });
    $( "#footer" ).toolbar({ theme: "b" });
    // Handler for navigating to the next page
    function navnext( next ) {
        $( ":mobile-pagecontainer" ).pagecontainer( "change", next + ".html", {
            transition: "slide"
        });
    }
    // Handler for navigating to the previous page
    function navprev( prev ) {
        $( ":mobile-pagecontainer" ).pagecontainer( "change", prev + ".html", {
            transition: "slide",
            reverse: true
        });
    }
    // Navigate to the next page on swipeleft
    $( document ).on( "swipeleft", ".ui-page", function( event ) {
        // Get the filename of the next page. We stored that in the data-next
        // attribute in the original markup.
        var next = $( this ).jqmData( "next" );
        // Check if there is a next page and
        // swipes may also happen when the user highlights text, so ignore those.
        // We're only interested in swipes on the page.
        if ( next && ( event.target === $( this )[ 0 ] ) ) {
            navnext( next );
        }
    });
    // Navigate to the next page when the "next" button in the footer is clicked
    $( document ).on( "click", ".next", function() {
        var next = $( ".ui-page-active" ).jqmData( "next" );
        // Check if there is a next page
        if ( next ) {
            navnext( next );
        }
    });
    // The same for the navigating to the previous page
    $( document ).on( "swiperight", ".ui-page", function( event ) {
        var prev = $( this ).jqmData( "prev" );
        if ( prev && ( event.target === $( this )[ 0 ] ) ) {
            navprev( prev );
        }
    });
    $( document ).on( "click", ".prev", function() {
        var prev = $( ".ui-page-active" ).jqmData( "prev" );
        if ( prev ) {
            navprev( prev );
        }
    });
});
$( document ).on( "pageshow", ".demo-page", function() {
    var thePage = $( this ),
        title = thePage.jqmData( "title" ),
        next = thePage.jqmData( "next" ),
        prev = thePage.jqmData( "prev" );
    // Point the "Trivia" button to the popup for the current page.
    $( "#trivia-button" ).attr( "href", "#" + thePage.find( ".trivia" ).attr( "id" ) );
    // We use the same header on each page
    // so we have to update the title
    $( "#header h1" ).text( title );
    // Prefetch the next page
    // We added data-dom-cache="true" to the page so it won't be deleted
    // so there is no need to prefetch it
    if ( next ) {
        $( ":mobile-pagecontainer" ).pagecontainer( "load", next + ".html" );
    }
    // We disable the next or previous buttons in the footer
    // if there is no next or previous page
    // We use the same footer on each page
    // so first we remove the disabled class if it is there
    $( ".next.ui-state-disabled, .prev.ui-state-disabled" ).removeClass( "ui-state-disabled" );
    if ( ! next ) {
        $( ".next" ).addClass( "ui-state-disabled" );
    }
    if ( ! prev ) {
        $( ".prev" ).addClass( "ui-state-disabled" );
    }
});

Answer 1

我进行了相同的实验，并且在我的平板电脑（Nexus 7 - Google Chrome）上观察到了类似的结果。 如果您要创建 Web 应用程序或移动网站，则不应使用像 jQueryMobile 这样的重型框架，因为即使这些工具最终使您的生活更轻松，结果，尤其是在 Android 设备上，也会变得缓慢和迟缓。 换句话说，您应该创建自己的 .css 和 .js。 如果您需要经常操作 DOM，您还应该寻找 jQuery 的替代品。 我建议你使用 Zepto.js。

Answer 2

最后，我决定使用 jQuery touchSwipe 插件并编写自己的代码，在不同的浏览器和设备上都能正常工作。如果没有 HTML，其中一些可能没有意义，但基本上我根据传递给方法的变量来确定滑动的方向。然后，通过获取各种属性和类名，我将打开和关闭先前从另一种方法将 JSON 加载到其中的各种 div 的显示。我这样做的方式是通过子字符串，其中 id 的最后一位数字是一个数字。如果有人对这段代码如何更有效有任何意见，我很高兴听到你的想法。干杯。

function swipeLiterary() {
    $("#read").swipe({
      swipe:function(event, direction, distance, duration, fingerCount) {
          switch (direction) {
            case 'left':
                var thisPage = $('.display').attr('id');
                var nextPageNum = parseInt(thisPage.substring(8)) + 1;
                var nextPage = thisPage.substring(0,8) + nextPageNum;
                if (nextPageNum > 9) {
                    break
                }
                $('#' + thisPage).removeClass('display').addClass('nodisplay');
                $('#' + nextPage).removeClass('nodisplay').addClass('display');
                console.log(nextPage);
                break;
            case 'right':
                var thisPage = $('.display').attr('id');
                var prevPageNum = parseInt(thisPage.substring(8)) - 1;
                var prevPage = thisPage.substring(0,8) + prevPageNum;
                if (prevPageNum < 0){
                    break;  
                }
                $('#' + thisPage).removeClass('display').addClass('nodisplay');
                $('#' + prevPage).removeClass('nodisplay').addClass('display');
                console.log(prevPage);
                break;  
            case 'up':
                console.log('up');
                break;
          }
        //$(this).text("You swiped " + direction );
        //console.log(this);
      }
    }); 
}