离子框架 - 显示多个标签

问题描述：

我一直在努力获得使用多个标签的简单页面。我找到的所有示例似乎只显示一个选项卡。我跟着这个视频（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(); 
     } 
    }); 
});

这是我最终输出

答

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

离子框架 - 显示多个标签

相关推荐