Question

我来自RoR / Laravel框架并且第一次在Ionic工作。在我的应用程序中，顶部水平菜单栏包含链接。在点击链接时，它应该加载相应的屏幕。无论如何我可以创建一个主布局，然后根据URL包含部分内容吗？对于noobie来说，最简单和最合适的方式是什么？

Answer 1

我会向你推荐简单的“sidemenu”初学者模板，它基本上就是你所要求的。但是，它没有在顶部，而是在一侧。但是，您同意将移动应用程序的所有链接“放在首位”只是“不是现在设计的方式”。

无论如何，看一看this demo，我认为它会引起你想要表现的共鸣。该演示主要来自官方离子示例from Github。

因此，通过点击一个稍微受欢迎的“汉堡包”图标，您可以切换菜单，（正如您将在代码中看到的那样）实际上是一个保留在所有其他视图上的主视图。

希望这有助于推动你朝着正确的方向前进。

编辑：满足plunker错误（它不允许我发布没有代码的plunker链接）：

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
  <title></title>
  <link data-require="ionic@1.0.0-beta.1" data-semver="1.0.0-beta.1" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" />
  <link rel="stylesheet" href="style.css" />
  <script data-require="ionic@1.0.0-beta.1" data-semver="1.0.0-beta.1" src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
  <!-- cordova script (this will be a 404 during development) -->
  <script src="cordova.js"></script>
  <script src="app.js"></script>
  <script src="controllers.js"></script>
</head>

<body ng-app="starter">
  <ion-nav-view></ion-nav-view>
</body>

Ionic：如何添加主布局？

1 个答案: