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

回答

相關問題