Question

我刚开始使用phonegap，我有两页index.html和pages.html， Index.html页面包含owlslider，pages.html具有移动swipeLeft and swiprRight功能。

它适用于桌面浏览器，但是当我在Android模拟器或移动设备上测试它时，只有第一页jquery正在运行。

即如果我将滑块页面作为索引而不是滑块正在工作但是当我导航到滑动功能页面而不是滑动功能不起作用，并且如果我将滑动页面作为索引页面而不是滑动工作但是如果我导航到滑块页面比它不起作用。

我按照html标准包含js文件

<script src="js/jquery.mobile.min.js"></script>

并在两个页面中包含此js（即index.html和page.html）

在phonegap项目中是否有任何特定的方法来包含js文件？我错过了什么吗？

我也在使用桌面版的phonegap进行测试，但效果仍然相同。

修改

我发现了this回复中指出Can't use more then one data-role="page" inside any subsequent HTML page, only initial one can have more then one page.的内容，这就是为什么我的滑动功能在第二页不起作用的原因。但是如何解决这个问题？如何使用data-role="page"将滑动放入单个页面？因为我也想更改页眉。

Answer 1

此行为可能是由index.html和pages.html之间的导航代码引起的。请注意，jQuery mobile使用页面容器在多个HTML页面之间进行导航。

只应将JavaScript添加到index.html，而pages.html应仅包含不同的HTML布局。您的index.html应如下所示：

<html>
    <head>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.mobile.min.js"></script>
    </head>
    <body>
         <div data-role="page" id="index">
             <div data-role="header">
                 <h1>Login</h1>
             </div>
             <div data-role="main">
                 <!-- Some html content here -->
                 <a href="pages.html">To the pages!</a> 
             </div>
         </div>
    </body>
</html>

您的pages.html应具有相同的结构，但不应将JavaScript添加到该HTML文件中。页面HTML文件应如下所示：

<html>
    <head>
        <title></title>
    </head>
    <body>
        <div data-role="page" id="pages">
             <!-- Some html content here -->
        </div>
    </body>
</html>

如果您没有在页面之间导航的锚点，您也可以使用jQuery移动JavaScript。 JavaScript很简单，看起来像这样：

jQuery.mobile.pageContainer.pagecontainer("change", "menu.html");

希望这有帮助！

Answer 2

我有一段时间没有这个问题，但没有时间去看它。

今天早上在所有页面上我将移动的内容和JS / JQuery加载到Body / data-role =“page”div中（在该页面上，而不是在index.html页面上的所有内容）并且它有效。< / p>

所以试一试。

可以在此处找到更多解决方案和更好的解释 - Why I have to put all the script to index.html in jquery mobile

让我知道你如何继续，如果没有任何作用，我会一直在寻找你。

Phonegap - Jquery / jquery移动版仅在app的第一页上工作

2 个答案: