Question

我正在使用Monaca Cloud IDE，Onsen-ui和PhoneGap / Cordova编写一个简单的应用程序。该应用程序将只有一个主页面和一个设置页面，所以我使用Monaca / Onsen-UI提供的“最小模板”。事实是，我想在满足条件时动态加载第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-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函数中，就像第一个问题的解决方案一样，但这也不起作用。

Answer 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]表示参数是可选的，而不是数组。

希望它有所帮助！

Monaca onsen-ui条件页面导航

1 个答案: