離子框架 - 顯示多個標籤

我一直在努力獲得使用多個標籤的簡單頁面。我找到的所有示例似乎只顯示一個選項卡。我跟着這個視頻（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(); 
     } 
    }); 
});

這是我最終輸出

來源

2014-10-01 John F.

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

來源

2014-10-01 16:24:09 InfinitePrime

離子框架 - 顯示多個標籤

回答

相關問題