Question

我正在重新设计一个适合移动设备的网站。我想添加向左和向右滑动以导航并找到一个使用此jquery示例的方法： http://demos.jquerymobile.com/1.4.5/swipe-page/

当我将此添加到我的网站时，它工作得很好。也就是说，直到我在div中使用data-role ='page'。

我已经尝试过JQuery给出的示例，我遇到了同样的问题。在这个例子中（www.jouwjoure.nl/test/newyork.html），我放入了一个div并尝试滑动。

滑动在我放入的div之外工作，但是当我在我放入的div中滑动时，没有任何反应。

我做错了什么？

Answer 1

查看演示源代码中的注释：

// 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 on swipeleft
$( document ).on( "swipeleft", ".ui-page", function( event ) {
    var currPage = $(":mobile-pagecontainer").pagecontainer("getActivePage");
    var next = $(currPage).jqmData( "next" );
    if ( next ) {
        navnext( next );
    }
});

附加提示（取决于您的要求）：

此外，为了避免其他令人讨厌的副作用，您还可以在添加的叠加元素上设置unselectable和undraggable。尝试一下。

jquery滑动以导航元素的示例将无法正常工作

1 个答案: