Question

尝试制作移动网络应用。其中三个页面即第1,2,3条应该在滑动时相互转换。在每个文章页面中，应该有指向其他页面的链接，以显示翻转过渡。我设法让它工作，但我使用的代码导致应用程序能够刷过我的所有“页面”，而我希望只针对滑动功能的“文章”页面。我认为主要是需要将JQ更改为直接转到特定页面，这可能吗？ JQ我目前使用var nextpage = $ .mobile.activePage.next（'[data-role =“page”]'）;如果我给所有文章页面都有一个'文章'的ID，我如何将它定位到data-role =“page”，同时还指定只有文章ID的页面？

文章页面示例（刷到第2条和第3条）：

<div data-role="page" id="article1">

<div data-role="content">

  <a href="#pagetwo" data-transition="flip"><div style="width:50px; height: 50px; background-color:blue;"></div></a>


<a href="#pagethree" data-transition="flip"><div style="width:50px; height: 50px; background-color:blue; float: right;"></div></a>


</div>

示例页面（链接位于文章页面和翻转之一）：

<div data-role="page" id="pagethree">
<div data-role="header">
<h1>Welcome To pagethree</h1>
</div>

<div data-role="main" class="ui-content">
<p>Click on the link to go back. <b>Note</b>: fade is default.</p>
<a href="#article1" data-transition="flip" data-direction="reverse">Go back to Page One</a>
</div>

JQ：

<script>

$(document).on('swipeleft', '.ui-page', function(event){    
if(event.handled !== true) // This will prevent event triggering more then once
{    
    var nextpage = $.mobile.activePage.next('[data-role="page"]');
    // swipe using id of next page if exists
    if (nextpage.length > 0) {
        $.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
    }
    event.handled = true;
}
return false;         
});

$(document).on('swiperight', '.ui-page', function(event){     
if(event.handled !== true) // This will prevent event triggering more then once
{      
    var prevpage = $(this).prev('[data-role="page"]');
    if (prevpage.length > 0) {
        $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
    }
    event.handled = true;
}
return false;            
});


</script>

Answer 1

我是个白痴。我只是替换了var nextpage = $ .mobile.activePage.next（＆＃39; [data-role =＆＃34; page＆＃34;]＆＃39;）; with var nextpage = $ .mobile.activePage.next（＆＃39;＃article＆＃39;）;

JQM指定滑动页面更改

1 个答案: