PhoneGap中文网

标题: 请教ion-tabs嵌套的问题 [打印本页]
作者: jumtre    时间: 2016-2-23 10:54
标题: 请教ion-tabs嵌套的问题
刚接触ionic，碰到一个问题，想请教下各位。

如上面图片所示，我需要的功能是：
1、下面一排tabs，点击tab1后在上方空白区域显示页1的内容；
2、点击tab2后在上方空白区域显示一排tabs，这排tabs要在顶部，点击tab2后默认选中funcTab1，显示功能页1的内容，此时下面的tabs也要在页面中显示；
3、点击funcTab2，在中间空白区域显示功能页2的内容，此时下面的tabs要同时在页面中显示。

我的代码：
index.html
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  6.     <title></title>

  8.     <link href="lib/ionic/css/ionic.css" rel="stylesheet" />
  9.     <link href="css/style.css" rel="stylesheet" />
  10.     <link href="css/controlStyle.css" rel="stylesheet" />

  12.     <script src="lib/ionic/js/ionic.bundle.min.js"></script>
  13.     <script src="lib/jquery-1.8.2.js"></script>
  14.     <script src="lib/common.js"></script>
  15.     <script src="lib/GridTable.js"></script>

  17.     <!-- cordova script (this will be a 404 during development) -->
  18.     <script src="cordova.js"></script>

  20.     <script src="js/app.js"></script>
  21.     <script src="js/controllers.js"></script>
  22.     <script src="js/services.js"></script>
  23.     <script src="js/utils.js"></script>
  24. </head>
  25. <body ng-app="starter">
  26.     <ion-nav-view></ion-nav-view>
  27. </body>
  28. </html>
复制代码
tabs.html
  1. <ion-tabs class="tabs-icon-top tabs-positive">
  2.     <ion-tab title="首页" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" class="fontsize" href="#/tab/home" >
  3.         <ion-nav-view name="tab-home"></ion-nav-view>
  4.     </ion-tab>
  5.     <ion-tab title="OA" icon-off="ion-ios-monitor-outline" icon-on="ion-ios-monitor" href="#/tab/oa">
  6.         <ion-nav-view name="tab-oa"></ion-nav-view>
  7.     </ion-tab>
  8.     <ion-tab title="查房" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/rounds">
  9.         <ion-nav-view name="tab-rounds"></ion-nav-view>
  10.     </ion-tab>
  11.     <ion-tab title="搜索" icon-off="ion-ios-search" icon-on="ion-ios-search-strong" href="#/tab/search">
  12.         <ion-nav-view name="tab-search"></ion-nav-view>
  13.     </ion-tab>
  14.     <ion-tab title="我" icon-off="ion-ios-person-outline" icon-on="ion-ios-person" href="#/tab/me">
  15.         <ion-nav-view name="tab-me"></ion-nav-view>
  16.     </ion-tab>
  17. </ion-tabs>
复制代码
funcTabs.html
  1. <ion-view>
  2.     <ion-tabs class="tabs-icon-left tabs-positive tabs-top">
  3.         <ion-tab title="诊断" icon-off="ion-ios-glasses-outline" icon-on="ion-ios-glasses" href="#/funcTab/diagnosis">
  4.             <ion-nav-view name="funcTab-diagnosis"></ion-nav-view>
  5.         </ion-tab>
  6.         <ion-tab title="医嘱" icon-off="ion-ios-book-outline" icon-on="ion-ios-book" href="#/funcTab/order">
  7.             <ion-nav-view name="funcTab-order"></ion-nav-view>
  8.         </ion-tab>
  9.         <ion-tab title="检查" icon-off="ion-ios-medkit-outline" icon-on="ion-ios-medkit" href="#/funcTab/check">
  10.             <ion-nav-view name="funcTab-check"></ion-nav-view>
  11.         </ion-tab>
  12.         <ion-tab title="检验" icon-off="ion-ios-flask-outline" icon-on="ion-ios-flask" href="#/funcTab/test">
  13.             <ion-nav-view name="funcTab-test"></ion-nav-view>
  14.         </ion-tab>
  15.         <ion-tab title="用血" icon-off="ion-ios-heart-outline" icon-on="ion-ios-heart" href="#/funcTab/blood">
  16.             <ion-nav-view name="funcTab-blood"></ion-nav-view>
  17.         </ion-tab>
  18.         <ion-tab title="文书" icon-off="ion-ios-paper-outline" icon-on="ion-ios-paper" href="#/funcTab/document">
  19.             <ion-nav-view name="funcTab-document"></ion-nav-view>
  20.         </ion-tab>
  21.     </ion-tabs>
复制代码
app.js
  1. angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

  3. .run(function ($ionicPlatform) {
  4.     $ionicPlatform.ready(function () {
  5.         if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
  6.             cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
  7.         }
  8.         if (window.StatusBar) {
  9.             StatusBar.styleLightContent();
  10.         }
  11.     });
  12. })

  14. .config(function ($stateProvider, $urlRouterProvider) {

  16.     $stateProvider
  17.          .state('login', {
  18.              url: "/login",
  19.              controller: "LoginCtrl",
  20.              templateUrl: "templates/login.html"
  21.          })

  23.       .state('tab', {
  24.           url: '/tab',
  25.           abstract: true,
  26.           templateUrl: 'templates/tabs.html'
  27.       })

  29.     .state('tab.home', {
  30.         url: '/home',
  31.         views: {
  32.             'tab-home': {
  33.                 templateUrl: 'templates/home.html',
  34.                 controller: 'HomeCtrl'
  35.             }
  36.         }
  37.     })

  39.     .state('tab.rounds', {
  40.         url: '/rounds',
  41.         views: {
  42.             'tab-rounds': {
  43.                 templateUrl: 'templates/rounds/funcTabs.html',
  44.                 controller: 'RoundsCtrl'
  45.             }
  46.         }
  47.     })

  49.     .state('tab.search', {
  50.         url: '/search',
  51.         views: {
  52.             'tab-search': {
  53.                 templateUrl: 'templates/search.html',
  54.                 controller: 'SearchCtrl'
  55.             }
  56.         }
  57.     })

  59.     .state('tab.me', {
  60.         url: '/me',
  61.         views: {
  62.             'tab-me': {
  63.                 templateUrl: 'templates/me/docInfo.html',
  64.                 controller: 'MeCtrl'
  65.             }
  66.         }
  67.     })

  69.     .state('funcTab', {
  70.         url: '/funcTab',
  71.         abstract: true,
  72.         templateUrl: 'templates/rounds/funcTabs.html'
  73.     })

  75.     .state('funcTab.diagnosis', {
  76.         url: '/diagnosis',
  77.         views: {
  78.             'funcTab-diagnosis': {
  79.                 templateUrl: 'templates/rounds/tabs/diagnosis.html',
  80.                 controller: 'DiagnosisCtrl'
  81.             }
  82.         }
  83.     })

  85.     .state('funcTab.order', {
  86.         url: '/order',
  87.         views: {
  88.             'funcTab-order': {
  89.                 templateUrl: 'templates/rounds/tabs/order.html',
  90.                 controller: 'OrderCtrl'
  91.             }
  92.         }
  93.     })

  95.     .state('funcTab.check', {
  96.         url: '/check',
  97.         views: {
  98.             'funcTab-check': {
  99.                 templateUrl: 'templates/rounds/tabs/check.html',
  100.                 controller: 'CheckCtrl'
  101.             }
  102.         }
  103.     })

  105.     .state('funcTab.test', {
  106.         url: '/test',
  107.         views: {
  108.             'funcTab-test': {
  109.                 templateUrl: 'templates/rounds/tabs/test.html',
  110.                 controller: 'TestCtrl'
  111.             }
  112.         }
  113.     })

  115.     .state('funcTab.blood', {
  116.         url: '/blood',
  117.         views: {
  118.             'funcTab-blood': {
  119.                 templateUrl: 'templates/rounds/tabs/blood.html',
  120.                 controller: 'BloodCtrl'
  121.             }
  122.         }
  123.     })

  125.     .state('funcTab.document', {
  126.         url: '/document',
  127.         views: {
  128.             'funcTab-document': {
  129.                 templateUrl: 'templates/rounds/tabs/document.html',
  130.                 controller: 'DocumentCtrl'
  131.             }
  132.         }
  133.     });

  135.     $urlRouterProvider.otherwise('/tab/home');

  137. });
复制代码


我现在做到了点击tab2显示了上面的一排funcTabs并显示funcTab1的内容页，但是这个时候下面的tabs没有了。
不知道是ionic不支持还是我路由写错了（修改过几次路由，也没能实现）或者是别的什么原因。
望大神们不吝赐教，谢谢。

另外：我把index.html页面的<ion-nav-bar>删掉了，再给funcTabs.html页面的<ion-tabs>加上tabs-top样式后页面上部还是留下了一个ion-nav-bar高度的空白区域，虽然我现在通过自己设定样式解决了这个问题，但是不知道ionic原生能不能解决这个问题，比如通过设置或者添加样式什么的。
作者: jumtre    时间: 2016-2-23 10:58
funcTabs.html的代码编辑错了，还有下面几行代码要加上去：
<ion-nav-view></ion-nav-view>
</ion-view>
完整代码是这样的：
  1. <ion-view>
  2.     <ion-tabs class="tabs-icon-left tabs-positive tabs-top">
  3.         <ion-tab title="诊断" icon-off="ion-ios-glasses-outline" icon-on="ion-ios-glasses" href="#/funcTab/diagnosis">
  4.             <ion-nav-view name="funcTab-diagnosis"></ion-nav-view>
  5.         </ion-tab>
  6.         <ion-tab title="医嘱" icon-off="ion-ios-book-outline" icon-on="ion-ios-book" href="#/funcTab/order">
  7.             <ion-nav-view name="funcTab-order"></ion-nav-view>
  8.         </ion-tab>
  9.         <ion-tab title="检查" icon-off="ion-ios-medkit-outline" icon-on="ion-ios-medkit" href="#/funcTab/check">
  10.             <ion-nav-view name="funcTab-check"></ion-nav-view>
  11.         </ion-tab>
  12.         <ion-tab title="检验" icon-off="ion-ios-flask-outline" icon-on="ion-ios-flask" href="#/funcTab/test">
  13.             <ion-nav-view name="funcTab-test"></ion-nav-view>
  14.         </ion-tab>
  15.         <ion-tab title="用血" icon-off="ion-ios-heart-outline" icon-on="ion-ios-heart" href="#/funcTab/blood">
  16.             <ion-nav-view name="funcTab-blood"></ion-nav-view>
  17.         </ion-tab>
  18.         <ion-tab title="文书" icon-off="ion-ios-paper-outline" icon-on="ion-ios-paper" href="#/funcTab/document">
  19.             <ion-nav-view name="funcTab-document"></ion-nav-view>
  20.         </ion-tab>
  21.     </ion-tabs>
  22.     <ion-nav-view></ion-nav-view>
  23. </ion-view>
复制代码


作者: jumtre    时间: 2016-2-26 14:15
我已经弄好了
作者: 573757449    时间: 2016-5-8 16:37
我也碰到同样的问题，请问楼主是怎么处理的呢
作者: bowenq25    时间: 2016-9-19 15:50
请问楼主怎么实现的呀，我也遇到了同样的问题，学生档不容易，求大神指教！



欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/) Powered by Discuz! X3.2