我正在 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>
测试.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 呢？
我的问题是:如何获得良好的页面转换(快速且具有效果)？
最佳答案
您应该删除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>
让我知道你的结果。
关于javascript - 使用jquery mobile和phonegap的应用程序的页面转换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12892684/