Ionic,如何在一个模板页面中显示多个选项卡

时间:2015-08-16 10:56:23

标签: cordova ionic-framework ionic

Ionic,如何在一个模板页面中显示多个标签? 我的演示不起作用。 我想要在顶部和底部。

http://codepen.io/TWangCoin/pen/KpLwJe/

.state('tabs.sub-tab', {
  url: "/sub-tab",
  views: {
    'sub-tab': {
      templateUrl: "sub-tab.html"
    }
  }
})

.state('tabs.facts', {
  url: "/facts",
  views: {
    'sub-tab': {
      templateUrl: "facts.html"
    }
  }
})

主要标签     

  <ion-tab title="Home" icon="ion-home" href="#/tab/home">
    <ion-nav-view name="home-tab">
    </ion-nav-view>
  </ion-tab>

  <ion-tab title="sub-tab" icon="ion-ios-search" href="#/tab/sub-tab">
    <ion-nav-view name="sub-tab"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Contact" icon="ion-ios-heart-outline" ui-sref="tabs.contact">
    <ion-nav-view name="contact-tab"></ion-nav-view>
  </ion-tab>

</ion-tabs>

我的子视图

<ion-view >
      <ion-content class="padding">
        <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">tab_view</a>
      </ion-content>
</ion-view>

jmp to facts view:      

  <ion-tabs class="tabs-light tabs-striped tabs-top" delegate-handle="zhiku-tabs">
    <ion-tab title="all">
      <ion-view>
        <ion-content>sss</ion-content>
      </ion-view>
    </ion-tab>
    <ion-tab title="sends">
      <ion-view>
        <ion-content>sss</ion-content>
      </ion-view>
    </ion-tab>
  </ion-tabs>

</ion-view>

在这里跑回来吧! 如何解决?

1 个答案:

答案 0 :(得分:0)

我完全理解你的问题,最好的方法是静态保留页眉和页脚,并根据点击动态更改html请参考this链接以获取启动并根据您的需要进行自定义UI需要