Apache Cordova不加载所有页面div

我正在开发一个带有PhoneGap的应用程序，我想在一些页面之间创建一个简单的页面。Apache Cordova不加载所有页面div

这是我的html文件

<html> 
<head> 
<title>Prova</title> 
<meta name="viewport" content="width=device-width,initial-scale=1"/> 


</head> 

<body> 


<div class="prima" data-role="page" id="article1"> 
    <div data-role="header" data-theme="b" data-position="fixed" data-id="footer"> 
    <h1>Articles</h1> 
    </div> 
    <div data-role="content"> 
    <p>Article 1</p> 
    </div> 
    <div data-role="footer" data-theme="b" data-position="fixed" data-id="footer"> 
    <h1>Footer</h1>  
    </div> 
</div> 

<div class="prima" data-role="page" id="article2"> 
    <div data-role="header" data-theme="b" data-position="fixed" data-id="footer"> 
    <a href="#article1" data-icon="home" data-iconpos="notext">Home</a> 
    <h1>Articles</h1> 
    </div> 
    <div data-role="content"> 
    <p>Article 2</p> 
    </div> 
    <div data-role="footer" data-theme="b" data-position="fixed" data-id="footer"> 
    <h1>Footer</h1> 
    </div> 
</div> 


<div class="prima" data-role="page" id="article3"> 
    <div data-role="header" data-theme="b" data-position="fixed" data-id="footer"> 
    <a href="#article1" data-icon="home" data-iconpos="notext">Home</a> 
    <h1>Articles</h1> 
    </div> 
    <div data-role="content"> 
    <p>Article 3</p> 
    </div> 
    <div data-role="footer" data-theme="b" data-position="fixed" data-id="footer"> 
    <h1>Footer</h1> 
    </div> 
</div> 

<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css" /> 
<script src="js/jquery.js"></script> 
<script src="js/jquery_mobile.js"></script> 
<script src="js/gianni.js"></script> 
</body> 
</html>

我的js文件是（http://jsfiddle.net/Gajotres/NV6Py/）

$(document).on('swipeleft', '.prima', function(event){  
if(event.handled !== true) // This will prevent event triggering more then once 


{  
    var nextpage = $(this).next('.prima'); 
    console.log(nextpage); 
    // 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', '.prima', function(event){ 
if(event.handled !== true) // This will prevent event triggering more then once 
{  
    var prevpage = $(this).prev('.prima'); 
    console.log(prevpage); 

    if (prevpage.length > 0) { 
     $.mobile.changePage(prevpage, {transition: "slide", reverse:  true}, true, true); 
    } 
    event.handled = true; 
} 
return false;    
});

当我打开这个HTML文件，它的工作原理，并阅读所有页面的div，但如果我用这个页面我的应用程序，我有一些网页之前到达此页面刷卡不工作，因为var nextpage = $（this）.next（'。prima'）是empy，如果我检查与Ispector在HTML中只有拳头div没有其他（例如第2条，第3条）

来源

2015-07-20 Giovanni Rizzi

你的问题有点不清楚，但不幸的是我不能评论你的问题，因为我的信誉低。所以我不能要求你做更多的澄清。

但是你有3个divs全部用class：prima。而你的问题是你只能看到第一个div，所以带有id的div：article1。

之所以你只能看到一个div，是因为你使用了data-role: page。您正在创建一个页面，并且您当时只能看到一个页面。

来源

2015-07-20 13:37:20 Reptar

嗨Reptar，我用这个例子 http://jsfiddle.net/Gajotres/NV6Py/ 但是，如果我只打开这两个页面的刷卡工作。但如果我在我的应用程序中使用此页面，并且在到达此页面之前有一些页面，则刷卡不起作用，因为 var nextpage = $（this）.next（'。prima'）是empy，如果我检查在HTML中的ispector只有拳头div和没有其他（例如article2，article3） –

Oke，所以我看到的是，当您从第1页到第2页，以及第2页到第3页滑动时，您的代码有效，但是当您想要滑回去，它不起作用？ – Reptar

Reptar如果你给我你的邮件，我可以发送你的项目来了解。因为它很难解释，但如果你看起来更容易。 –

Apache Cordova不加载所有页面div

回答

相关问题