Ionic Framework-顯示多個標簽

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 個解決方案

解決方案1
0 2014-10-01 16:24:09

Ionic Framework-顯示多個標簽

問題描述

1 個解決方案

解決方案1 0 2014-10-01 16:24:09

解決方案1
0 2014-10-01 16:24:09