Question

我尝试设置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>

如果我选择主页Content of One没有显示。我刚从官方那边复制了代码：Ionic ion-tabs。此外，我的ion-nav-buttons未显示在ion-nav-bar。

中

我的代码出了什么问题？

是否可以将标签置于屏幕顶部？我不想要底部我希望他们顶部。如果可能的话，我还需要改变颜色和透明度。

Answer 1

正如Bipin Bhandari建议的那样，你的代码中缺少一些东西。在某些时候，您可能想要使用路由和控制器。

话虽如此，您可以使用以下代码简单地使用TAB呈现页面：

<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>：

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

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

在配置应用程序期间定义状态：

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

并添加包含视图和标签的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应该这样做。

Answer 2

在codepen中，没有用于路由的脚本，如果没有它，标签将无法运行。离子标签的文档可能会产生误导，因为它只显示了html部分。

您基本上有两种方法可以获得正常运行的离子标签。一个是用标签创建新的离子项目：

ionic start myApp tabs

在这个项目中，您可以看到实施良好的选项卡并根据您的需要进行自定义。

或者您可以浏览其源代码以了解其实现方式。源代码在这里：

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

祝你好运！

无法使离子片工作

2 个答案: