无法使离子标签工作

我试图设置类似于this example的标签，但正如您所看到的那样，没有显示任何内容。我做的：无法使离子标签工作

<ion-nav-bar class="bar-positive"> 
    <ion-nav-back-button> 
    </ion-nav-back-button> 
</ion-nav-bar> 

<ion-nav-view> 
    <ion-nav-buttons side="right"> 
     <button class="button" ng-click="done()"> 
      Done 
     </button> 
    </ion-nav-buttons> 
</ion-nav-view> 
<ion-tabs class="tabs-positive tabs-icon-only"> 

    <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline"> 
     Content of One 
    </ion-tab> 

    <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline"> 
     Content of Two 
    </ion-tab> 

    <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline"> 
     Content of Three 
    </ion-tab> 

</ion-tabs>

如果我选择Home Content of One没有显示出来。我只是从官方复制了代码：Ionic ion-tabs。我的ion-nav-buttons也没有出现在ion-nav-bar。

我的代码有什么问题？

是否有可能让标签到屏幕的顶部？我不想要底部我想他们顶部。如果可能，我还需要更改颜色和透明度。

来源

2015-07-21 Mulgard

正如Bipin Bhandari所说，你在代码中缺少了一些东西。在某些时候，您可能需要使用路由和控制器。

说了这么多，你可以简单地渲染页面，使用此代码标签：

<body ng-app="starter"> 

    <ion-header-bar class="bar-positive"> 
     <h1 class="title">Ionic Blank Starter</h1> 
    </ion-header-bar> 

    <ion-tabs class="tabs-positive tabs-icon-only"> 

     <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline"> 
      <ion-nav-view> 
       <ion-content> 
        Content of One 
       </ion-content> 
      </ion-nav-view> 
     </ion-tab> 

     <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline"> 
      <ion-nav-view> 
       <ion-content> 
        Content of Two 
       </ion-content> 
      </ion-nav-view> 
     </ion-tab> 

     <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline"> 
      <ion-nav-view> 
       <ion-content> 
        Content of Three 
       </ion-content> 
      </ion-nav-view> 
     </ion-tab> 
    </ion-tabs> 

</body>

有了这个，你甚至都不需要定义一个控制器或管理的状态，一切会工作得很好。

这是codepen。

在这里，你没有使用标准的导航系统，因为你没有使用状态，你没有默认<ion-nav-view>所有的子视图将被注入;见参考文献。 here。

如果你想将按钮添加到你的头，你只能增加它的<ion-header-bar>内：

<ion-header-bar class="bar-positive"> 
    <h1 class="title">Ionic Blank Starter</h1> 
    <div class="buttons"> 
     <button class="button">Done</button> 
     </div> 
</ion-header-bar>

当然像这样的东西的工作是不可行的，考虑到你正在构建一个工作应用程序，你需要控制器，导航和历史记录。

走的路，你的身体来定义<ion-nav-view>：

$stateProvider 
    .state('home', { 
     url: '/home', 
     templateUrl: 'home.html', 
     controller: 'homeController', 
    });

，并补充说：

<ion-nav-bar class="bar-positive"> 
    <ion-nav-back-button> 
    </ion-nav-back-button> 
</ion-nav-bar> 

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

定义状态应用程序的配置过程中一个包含您的视图和标签的HTML页面：

<ion-view view-title="home"> 

    <ion-tabs class="tabs-positive tabs-icon-only tabs-striped tabs-top"> 

     <ion-tab title="Tab1" icon-on="ion-ios-home" icon-off="ion-ios-home-outline"> 
      <ion-nav-view name="tab-1"> 
       <ion-content padding="true" has-header="true"> 
        <h1>HOME</h1> 
       </ion-content> 
      </ion-nav-view> 
     </ion-tab> 

     <ion-tab title="Tab2" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline"> 
      <ion-nav-view name="tab-2"> 
       <ion-content padding="true" has-header="true"> 
        <h1>SETTINGS</h1> 
       </ion-content> 
      </ion-nav-view> 
     </ion-tab> 

     <ion-tab title="Tab3" icon-on="ion-ios-information" icon-off="ion-ios-information-outline"> 
      <ion-nav-view name="tab-3"> 
       <ion-content padding="true" has-header="true"> 
        <h1>INFO</h1> 
       </ion-content> 
      </ion-nav-view> 
     </ion-tab> 

    </ion-tabs> 

</ion-view>

如果你想看看它是如何工作的，这plunker应该做的。

来源

2015-07-21 17:08:19 LeftyX

这正是我正在寻找的。我不想要我的选项卡的任何路由。这是完全不合逻辑的在一个应用程序有一个后台时，我切换标签。谢谢。 – Mulgard

有点赞同你:-)干杯。 – LeftyX

@Mulgard：用一些更多的信息更新了我的答案。 Codepen也会更新。 – LeftyX

在codepen中，没有用于路由的脚本，没有它，选项卡将无法工作。离子选项卡的文档可能会引起误解，因为它只显示html部分。

你基本上有两种方式获得一个功能离子选项卡。一是创建标签全新离子项目：

ionic start myApp tabs

在这个项目中，你可以看到很好的执行选项卡和定制，以您的需求。

或者你可以浏览它的源代码，看看它是如何实现的。源代码是在这里：

https://github.com/driftyco/ionic-starter-tabs

祝你好运！

来源

2015-07-21 15:18:09

无法使离子标签工作

回答

相关问题