Question

我正在开发一个使用PhoneGap的应用程序，我想在一些页面之间创建一个简单的。

这是我的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（＆＃39; .prima＆＃39;）是empy，如果我在html中检查Ispector只有第一个div而没有其他（例如article2，article3）

Answer 1

你的问题有点不清楚，但不幸的是，由于声誉不佳，我无法对你的问题发表评论。所以我无法向您要求更多说明。

但是你有3个div与类：prima。而你的问题是你只能看到第一个div，所以div的id为：article1。

您只能看到一个div的原因是因为您使用了data-role: page。您正在创建一个页面，当时只能看到一个页面。

Apache Cordova无法加载所有页面div

1 个答案: