Monaca onsen-ui条件页面导航
我正在使用、Onsen和PhoneGap/Cordova编写一个简单的应用程序。该应用程序将只有一个主页和设置页面，所以我使用的是Monaca/Onsen提供的“最小模板”。问题是，我想动态加载一个条件满意的第3页。我想加载一个“欢迎”屏幕，当应用程序第一次打开后，下载，但不是再次。因为会有一些数据库集成，我想我可以对数据库做一个简单的插入，记录一个人使用该应用程序的情况。当应用程序打开时，可以调用一个简单的查询来检查数据库，如果存在使用记录，就不应该加载“欢迎”屏幕。
目前，我只想强制加载“欢迎”屏幕，只是为了在我开始编写条件之前检查它是否工作。
这是我的标准index.html页面：
<!DOCTYPE HTML>
<html ng-app="myAp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
ons.bootstrap();
</script>
</head>
<body>
<ons-navigator var="myNavigator" page = "page1.html">
</ons-navigator>
</body>
</html>我尝试过各种各样的东西。我花了几个小时阅读Onsen和Monaca的文档。这是如此令人沮丧的文件是如此模糊。
我尝试过的一些事情：
<script>
myNavigator.insertPage(0, "welcomePage.html", [animation:"lift"]);
</script>或
<script>
$scope.myNavigator.insertPage(0, "welcomePage.html", [animation:"lift"]);
</script>我也尝试了pushPage()，但没有成功。
我还尝试将其视为普通的HTML，向<ons-navigator>添加一个<ons-navigator>属性，然后执行以下操作：
<script>
var onsNav = document.getElementById("pageNav");
onsNav.page = "welcomePage.html";
</script>任何一件事都没有运气。
有人能帮忙吗，我觉得我快疯了。请不要只给我一个医生的链接，我去过那里。如果你想给一个链接到文档，至少添加补充解释，或告诉我如何解决我的具体问题。
提前感谢！
编辑:我上面的问题已经回答了，而且工作得很好。下面是一个后续问题：
只是一个后续的问题:我现在正试图将页面从堆栈中弹出，但它似乎不起作用。我在页面上有一个按钮，该按钮被推到堆栈上，该按钮具有onclick事件。onclick事件触发一个js函数，该函数如下所示：
function navToHome()
{
myNavigator.popPage({animation:fade});
}我也试过：
ons.myNavigator.popPage({animation:fade});我做错了什么？
编辑:我发现脚本根本没有启动：
我发现上面的函数不起作用。我已经移动了脚本标记，不管它是在<ons-page>标记的内部还是外部。我还试着把它放在onReady函数中，就像第一个问题的解决方案一样，但这也不起作用。
回答 1
Stack Overflow用户
发布于 2015-12-08 02:14:32
这有一个非常简单的解释:像其他库一样，Onsen UI第一次加载需要时间。你只需要等待，直到它完成装载的东西。在文档中，您可以看到有关ons.ready( callback )的内容，在运行回调之前，基本上要等到Onsen和Cordova加载之后才能看到。这个方法实际上是在文档中的大多数样本中使用的，所以我认为您有足够的示例。在你的例子中，你应该这样做：
<script>
ons.bootstrap();
ons.ready(function() {
myNavigator.pushPage('welcomePage.html', {animation: 'lift'});
});
</script>如果使用AngularJS，也可以将ons.ready( ... )放在第一个控制器中。
注意，pushPage/insertPage/等等的options参数不是一个数组，而是一个对象，正如您在导航器参考页中看到的那样。[parameter]意味着参数是可选的，而不是数组。
希望能帮上忙！
https://stackoverflow.com/questions/34131398
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号