Question

我正在使用html / css / javascript构建应用程序并使用phonegap进行构建。

所以，我首先想要简单的页面到页面导航。我试过这个：

索引：

<!DOCTYPE HTML>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="jquery-1.8.2.js"></script>
    <script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>

<body id="body">
    <div id="container" data-role="page">
        <a rel="external" data-role="button" href="test.html" data-transition="slide">click me</a>
    </div>

</body>

</html>

的test.html：

<!DOCTYPE HTML>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="jquery-1.8.2.js"></script>
    <script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>

<body id="body">
    <div id="container" data-role="page">
        New page!
    </div>

</body>

</html>

结果：当我点击按钮时，test.html页面加载速度非常慢，而data-transition =“slide”似乎被忽略了。

我发现了一篇关于动态页面加载的文章：https://www.ibm.com/developerworks/mydeveloperworks/blogs/94e7fded-7162-445e-8ceb-97a2140866a9/entry/dynamic_page_loading_for_phonegap1?lang=en

我真的没有得到。 HTML文件不是本地存储的吗？那么为什么要使用XMLHtppRequest？

我的问题是：如何获得良好的页面转换（快速和有效）？

Answer 1

您应该从rel="external"链接中删除<a>。

属性rel="external"会停用Ajax导航，跳过过渡效果，并刷新页面test.html。

删除后尝试使用您的代码。

index.html：

<!DOCTYPE HTML>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="jquery-1.8.2.js"></script>
    <script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>

<body id="body">
    <div id="container" data-role="page">

        <!-- REMOVE THE ATTRIBUTE REL="EXTERNAL" FROM THE LINK -->
        <a data-role="button" href="test.html" data-transition="slide">click me</a>
    </div>

</body>

</html>

test.html：

<!DOCTYPE HTML>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="jquery-1.8.2.js"></script>
    <script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>

<body id="body">
    <div id="container" data-role="page">
        New page!
    </div>

</body>

</html>

让我知道你的结果。

Answer 2

尝试Piotr Walczyszyn的this解决方案。强烈推荐给任何使用Jquery mobile和Phonegap的人。

使用jquery mobile和phonegap进行应用的页面转换

2 个答案: