Monaca onsen-ui 条件页面导航答案

【问题标题】：Monaca onsen-ui conditional page navigationMonaca onsen-ui 条件页面导航
【发布时间】：2015-12-07 10:29:59
【问题描述】：

我正在使用 Monaca Cloud IDE、Onsen-ui 和 PhoneGap/Cordova 编写一个简单的应用程序。该应用程序将只有一个主页和一个设置页面，因此我使用的是 Monaca/Onsen-UI 提供的“最小模板”。事情是，我想在满足条件时动态加载第三页。我想在下载后第一次打开应用程序时加载“欢迎”屏幕，但之后不再加载。因为会有一些数据库集成，所以我想我可以对数据库进行简单的插入，记录一个人对应用程序的使用情况。打开应用时，可以调用一个简单的查询来检查数据库，如果存在使用记录，则不应加载“欢迎”屏幕。

目前我只想强制加载“欢迎”屏幕，只是在我开始编写条件之前检查它是否有效。

这是我的标准 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-UI 和 Monaca 文档。文档如此模糊，真是令人沮丧。

我尝试过的一些事情：

<script>
  myNavigator.insertPage(0, "welcomePage.html", [animation:"lift"]);
</script>

或

<script>
  $scope.myNavigator.insertPage(0, "welcomePage.html", [animation:"lift"]);
</script>

我也尝试过 pushPage()，但没有成功。

我还尝试将其视为普通 HTML，将 id="pageNav" 属性添加到 <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 函数中，就像第一个问题的解决方案一样，但这也不起作用。

【问题讨论】：

标签： cordova onsen-ui monaca

【解决方案1】：

这有一个非常简单的解释：Onsen UI 与其他库一样，第一次加载需要时间。您只需要等到它完成加载内容即可。在文档中，您可以阅读有关 ons.ready( callback ) 的信息，基本上是等到 Onsen UI 和 Cordova 加载后再运行回调。该方法实际上用于文档中的大多数示例，因此我认为您有足够的示例。在你的情况下，你应该这样做：

<script>
  ons.bootstrap();

  ons.ready(function() {
    myNavigator.pushPage('welcomePage.html', {animation: 'lift'});
  });
</script>

如果你使用 AngularJS，你也可以将 ons.ready( ... ) 放在你的第一个控制器中。

注意pushPage/insertPage/etc 的options 参数。不是数组而是对象，正如您在navigator reference page 中看到的那样。 [parameter] 表示参数是可选的，不是数组。

希望对你有帮助！

【讨论】：

我还没看懂代码，还没试过弄明白，但我实现了它看看它是否有效。有用！太感谢了！如果我能多次投票给你，我会的，哈哈。
只是一个简单的问题，我现在正试图从堆栈中弹出页面，但它似乎不起作用。我将编辑我的原始帖子并显示一些代码，请参见上文。
@NutCracker1 只需在您想要的按钮或 div 中执行 onclick="myNavigator.popPage({animation: 'fade'})"（或 ng-click 以获取 AngularJS）。您应该记住的唯一一件事是myNavigator 必须在按钮的相同范围内定义（AngularJS 中的相同控制器）。