在制作第二个tab时，下方的主tab消失不见了

bowenq25 · 发表于 2016-9-19 16:14:42

本帖最后由 bowenq25 于 2016-9-19 16:19 编辑

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

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

bowenq25 · 发表于 2016-9-19 16:15:36

我的代码：

index.html:

<!DOCTYPE html>
<html>
  <head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="lib/ionic-rating/ionic-rating.css" rel="stylesheet">



<script src="lib/ionic/js/ionic.bundle.js"></script>


<script type="text/javascript" src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js"></script>


<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script src="lib/ionic-rating/ionic-rating.js"></script>
  </head>
  <body ng-app="starter">

<ion-nav-bar class="bar-positive" align-title="center">
   <ion-nav-back-button>
   </ion-nav-back-button>
</ion-nav-bar>

<ion-nav-view></ion-nav-view>
  </body>
</html>

bowenq25 · 发表于 2016-9-19 16:16:47

第一个tab:
<ion-tabs class="tabs-icon-top tabs-color-active-positive ">

  
  <ion-tab title="首页" icon-off="ion-earth" icon-on="ion-planet" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
  </ion-tab>

  
  <ion-tab title="发现" icon-off="ion-compass" icon-on="ion-android-compass" href="#/tab/chats">
<ion-nav-view name="tab-chats"></ion-nav-view>
  </ion-tab>

  
  <ion-tab title="服务" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/account">
<ion-nav-view name="tab-account"></ion-nav-view>
  </ion-tab>

  <ion-tab title="我的" icon-off="ion-ios-person-outline" icon-on="ion-ios-person" href="#/tab/mine">
<ion-nav-view name="tab-mine"></ion-nav-view>
  </ion-tab>

</ion-tabs>
第二个tab:
<ion-view title="服务">
<ion-tabs class="tabs-icon-left  tabs-top bar-subheader tabs-color-active-positive">
   <ion-tab title="酒店" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" href="#/funcTab/account/hotel/">
      <ion-nav-view name="funcTab-diagnosis"></ion-nav-view>
   </ion-tab>
   <ion-tab title="餐饮" icon-off="ion-coffee" icon-on="ion-android-restaurant" href="#/funcTab/account/canteen/">
      <ion-nav-view name="funcTab-order"></ion-nav-view>
   </ion-tab>
   <ion-tab title="演出" icon-off="ion-mic-b" icon-on="ion-mic-c" href="#/funcTab/account/performance/">
      <ion-nav-view name="funcTab-check"></ion-nav-view>
   </ion-tab>
   <ion-tab title="路况" icon-off="ion-android-car" icon-on="ion-model-s" href="#/funcTab/account/traffic/">
      <ion-nav-view name="funcTab-test"></ion-nav-view>
   </ion-tab>
   <ion-tab title="公告" icon-off="ion-speakerphone" icon-on="ion-radio-waves" href="#/funcTab/account/announcement/">
      <ion-nav-view name="funcTab-blood"></ion-nav-view>
   </ion-tab>
</ion-tabs>
<ion-nav-view></ion-nav-view>
</ion-view>

bowenq25 · 发表于 2016-9-19 16:17:14

APP.JS:

.state('funcTab', {
   url: '/funcTab',
   abstract: true,
   templateUrl: 'templates/tab-account.html'
})

.state('funcTab.hotel', {
   url: '/account/hotel/',
   views: {
      'funcTab-diagnosis': {
      templateUrl: 'templates/account-hotel.html',
      controller:'hotelCtrl'
      }
   }
})
.state('funcTab.canteen', {
   url: '/account/canteen/',
   views: {
      'funcTab-order': {
      templateUrl: 'templates/account-canteen.html',
      controller:'canteenCtrl'
      }
   }
})
.state('funcTab.performance', {
   url: '/account/performance/',
   views: {
      'funcTab-check': {
      templateUrl: 'templates/account-performance.html',
      controller:'performanceCtrl'
      }
   }
})
.state('funcTab.traffic', {
   url: '/account/traffic/',
   views: {
      'funcTab-test': {
      templateUrl: 'templates/account-traffic.html',
      controller:'trafficCtrl'
      }
   }
})
.state('funcTab.announcement', {
   url: '/account/announcement/',
   views: {
      'funcTab-blood': {
      templateUrl: 'templates/account-announcement.html',
      controller:'announcementlCtrl'
      }
   }
})

ionicwang · 发表于 2016-9-25 10:56:41

http://bbs.phonegap100.com/thread-3726-1-1.html 这个看看

		自动登录	找回密码
密码			立即注册

在制作第二个tab时，下方的主tab消失不见了

站长推荐 /1