Question

我一直在努力让一个简单的页面使用多个标签。我找到的所有示例似乎只显示一个选项卡。我按照此视频（http://learn.ionicframework.com/videos/ion-tabs-directive/）引导您完成此过程，并实际显示多个标签。我有一个不同的设置，但我按照一般步骤，我只看到一个选项卡。我做错了什么？

这是我的基页

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:sf="http://www.springframework.org/tags/faces">

    <head>
        <!-- Ionic Stylesheet -->
        <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.0.0-beta.13/css/ionic.min.css"/>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />       
    </head>

    <body ng-app="starter">

        <ion-tabs class="tabs-positive">
            <ion-tab title="Home">
                <ion-header-bar class="bar-positive">
                    <h1 class="title">Home</h1>
                </ion-header-bar>   

                <ion-content>
                    <p>Home</p>
                </ion-content>
            </ion-tab>

            <ion-tab title="About">
                <ion-header-bar class="bar-positive">
                    <h1 class="title">About</h1>
                </ion-header-bar>           
                <ion-content>
                    <h1>About the app</h1>
                </ion-content>
            </ion-tab>

        </ion-tabs>

        <!-- ionic/angular/jquery  -->
        <script type="text/javascript" src="http://code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.min.js"></script>

        <!-- Bootstraps the application -->
        <script type="text/javascript" src="#{request.contextPath}/mobile/js/app.js"></script>  
    </body>
</html>

这是我的app.js文件

angular.module('starter', ['ionic'])
    .run(function($ionicPlatform) {
        $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if(window.cordova && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
        // Set the statusbar to use the default style, tweak this to
        // remove the status bar on iOS or change it to use white instead of dark colors.
        StatusBar.styleDefault();
        }
    });
});

这就是我最终输出的内容

Answer 1

<ion-view>
<ion-tabs class="tabs">
    <ion-tab title="" class="">
      <ion-content>
      </ion-content scrollbar-y="false">
    </ion-tab>
    <ion-tab title="" class="">
      <ion-content>
      </ion-content scrollbar-y="false">
    </ion-tab>
</ion-tabs>
</ion-view>

Ionic Framework - 显示多个选项卡

1 个答案: