新人求救tabs嵌套问题
发布于 1年前 作者 keeperkwok 1580 次浏览 来自 问答

大家好, 想实现的功能就是2个页面的跳转,其中第二个页面内部有3个tab。 want.jpg

首先在index里定义了ion-nav-view

   <ion-nav-bar class="bar-stable">
     <ion-nav-back-button>
     </ion-nav-back-button>
   </ion-nav-bar>
   <ion-nav-view></ion-nav-view> 

接着定义了第一个page

<ion-view>

 <ion-nav-buttons side="right">
   <a class="button" ui-sref="pageparent.page2">page2</a>
 </ion-nav-buttons>

 <ion-content>

   page1

 </ion-content>

</ion-view>

第二个page需要先定义个parent,其中有页面的公共部分,以及tabs,和tabs中的view

<ion-view>

 <ion-content>

   <p>tab parent1</p>
   <p>tab parent2</p>
   <p>tab parent3</p>
   <p>tab parent4</p>
   <p>tab parent5</p>



   <ion-tabs class="tabs-top tabs-icon-top tabs-color-active-positive">
   <!-- Dashboard Tab -->
     <ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" ui-sref="pageparent.page2">
       <ion-nav-view name="parent-page2"></ion-nav-view>
     </ion-tab>
     <!-- Chats Tab -->
     <ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" ui-sref="pageparent.page3">
       <ion-nav-view name="parent-page3"></ion-nav-view>
     </ion-tab>

     <!-- Account Tab -->
     <ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" ui-sref="pageparent.page4">
       <ion-nav-view name="parent-page4"></ion-nav-view>
     </ion-tab>

 </ion-content>

</ion-view>

page2,page3,page4,就是很简单的内容

<ion-view>

  <ion-content>

    <p>page21</p>
    <p>page22</p>
    <p>page23</p>
    <p>page24</p>
    <p>page25</p>



  </ion-content>

</ion-view>

路由是这样定义的

    .state("page1", {
      url: "/page1",
      templateUrl: "templates/page1.html"
    })

    .state("pageparent", {
      url: "/pageparent",
      abstract: true,
      templateUrl: "templates/pageparent.html"
    })

    .state("pageparent.page2", {
      url: "/page2",
      views: {
        'parent-page2': {
          templateUrl: "templates/page2.html"
        }
      }
    })

    .state("pageparent.page3", {
      url: "/page3",
      views: {
        'parent-page3': {
          templateUrl: "templates/page3.html"
        }
      }
    })

    .state("pageparent.page4", {
      url: "/page4",
      views: {
        'parent-page4': {
          templateUrl: "templates/page4.html"
        }
      }
    })

但是结果很奇怪,页面比较错乱,tabs显示的位置不是想要的,tabs中view也没有适应到全屏,只显示了很小的高度,需要scroll。 求指教是不是用错了tabs

get.jpg

2 回复

这种情况下就不要用tabs了,直接使用一个button-bar来替代tabs,一样可以实现你想要的效果,还省去了路由配置

回到顶部