PhoneGap中文网

标题: 在制作第二个tab时，下方的主tab消失不见了 [打印本页]
作者: bowenq25    时间: 2016-9-19 16:14
标题: 在制作第二个tab时，下方的主tab消失不见了
本帖最后由 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
我的代码：

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
第一个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-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
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
http://bbs.phonegap100.com/thread-3726-1-1.html 这个看看



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