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

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

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

http://bbs.phonegap100.com/data/attachment/forum/201602/23/104105dxgzj2by9y7g5p7z.png

http://bbs.phonegap100.com/data/attachment/forum/201602/23/104108iggmcgeacdadeedd.png
http://bbs.phonegap100.com/data/attachment/forum/201602/23/104111j0rz9qr4934hk52k.png
如上面图片所示，我需要的功能是：
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">
    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

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

    <!-- cordova script (this will be a 404 during development) -->
    <script type="text/javascript" src="lib/ngCordova/dist/ng-cordova.min.js"></script>
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <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">
    <!--
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-positive" align-title="center">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <!--
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
    <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 ">

<!-- Dashboard Tab -->
<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>

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

<!-- Account 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-lefttabs-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 这个看看
页: [1]
查看完整版本: 在制作第二个tab时，下方的主tab消失不见了