Question

我正在尝试创建主要用于移动设备的网页。用户可以通过向左或向右滑动来从页面导航到另一个页面。我已经用jQuery mobile完成了。

现在，我想将其连接到屏幕底部的固定导航栏，以便在用户滑动时，激活的菜单项会相应更改。有人可以给我一个代码吗？

我也想这样做，以便用户单击菜单项时，页面的滑动动画与滑动时相同。现在，我在第二个菜单项上设置了动画，当单击它时，会发生动画，但是滑动页面始终是下一个页面，而不是我想要的确切页面。因此，如果用户位于首页上，然后单击第三个菜单项，则它会显示第二页的动画，以滑动查看并跳到第三页，当您单击第三个菜单项时应自动显示第三页的动画。

这是滑动页面脚本


function navnext( next ) {
    $( ":mobile-pagecontainer" ).pagecontainer( "change", next, {
        transition: "slide"
    });
}
function navprev( prev ) {
    $( ":mobile-pagecontainer" ).pagecontainer( "change", prev, {
        transition: "slide",
        reverse: true
    });
}


$( document ).one( "pagecreate", "#page1", function() {
    $( document ).on( "swipeleft", ".ui-page", function( event ) {
        var next = $( this ).jqmData( "next" );
        if ( next ) {
            navnext( next );
        }
    });
    $( document ).on( "swiperight", ".ui-page", function( event ) {
        var prev = $( this ).jqmData( "prev" );
        if (prev) {
            navprev( prev );
        }
    });

    $( document ).on( "click", ".next", function() {
        var next = $( ".ui-page-active" ).jqmData( "next" );

        // Check if there is a next page
        if ( next ) {
            navnext( next );
        }
    });

    $( 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 );
        }
    });


});

这是我的结构，其中我在菜单项“新闻”中添加了不良动画

<div id="page1" data-role="page" data-prev="#page3" data-next="#page2">
    <div data-role="content" class="sivu">
      I am page 1
    </div>
</div>
<div id="page2" data-role="page" data-prev="#page1" data-next="#page3">
    <div data-role="content" class="sivu">
       I am page 2
    </div>
</div>
<div id="page3" data-role="page" data-prev="#page2" data-next="#page1">
    <div data-role="content" class="sivu">
        I am page 3
    </div>
</div>
<div class="scrollmenu" id="navbar" data-role="footer">
  <a href="#page1">Home</a>
  <a href="#page2" class="next">News</a>
  <a href="#page3">Contact</a>
  <a href="#about">About</a>
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

这是代码笔的链接（由于某种原因，它不起作用） https://codepen.io/pinjakumpulainen/pen/YMbNRx

如何将导航链接连接到jquery.mobile滑动页面？

0 个答案: