在离子如何在顶部添加固定徽标栏-Java 学习之路

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

我从离子网站的一个启动应用程序“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 然后我可以想象它 . 我尝试了其他组合，将其放在导航视图中，使用离子内容，但我仍然卡住了 .

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

1 回答

-1

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

如果你真的想看看你的 Headers ，你必须做很多事情 .

配置您的路线 .
为每个路径网址开发相应的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

回复于 2024-04-28T04:07:19+08:00

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

1 回答

相关问题