Question

我刚开始使用离子框架作为混合应用程序，并且卡在了大门口！我想要一个带有徽标和搜索图标的固定顶部栏;然后剩下的内容包括 - 依赖于上下文的菜单，后跟内容。

我从离子网站的一个启动应用程序“sidemenu”开始并修改它。

<ion-nav-bar class="logo-bar">
    <button class="button button-clear">
        <img class="pull-left" src="img/YourCompany-trans.png">
    </button>
    <div class="title icon ion-search" ng-click="doSearch()">
    </div>
    <button class="button button-clear">
        <img class="pull-right" src="img/MyCompanyLogo.png">
    </button>
</ion-nav-bar>

<ion-nav-view>
</ion-nav-view>

</body>

但我的徽标/搜索栏根本没有出现。如果我删除ion-nav-view，那么我可以将其可视化。我尝试了其他组合，将它放在导航视图中，使用离子内容，但我仍然卡住了。

这样做的正确方法是什么？离子文档相当稀疏。

Answer 1

ion-nav-view用于导航和路由视图。

如果你真的想看看你的标题，你必须做很多事情。

配置您的路线。
为每个路径网址开发相应的HTML网页/ HTML模板。
连接并运行。

HTML：

    <ion-nav-view></ion-nav-view>



    <script id="templates/yourTemplate.html" type="text/ng-template">
      <ion-view view-title="Welcome">
        <ion-content class="padding">
            <!-- Place your HTML content containing header here -->
        </ion-content>
      </ion-view>
    </script>

JS：

    angular.module('ionicApp', ['ionic'])
    .config(function($stateProvider, $urlRouterProvider) {

      $stateProvider
        .state('yourStateName', {
          url: "/UrlToBeDisplayedInTheBrowser",
          templateUrl: "idThatYouSpecifiedInTheScripTag"
        });
    });

可以找到一个完整的示例here

在离子如何在顶部添加固定徽标栏

1 个答案: