angularjs – 如何在没有新模板的情况下在Ionic选项卡中呈现内容

发布时间：2020-12-17 17:07:07 所属栏目：安全来源：网络整理

导读：我们正在构建一个包含三个选项卡的模板.这些选项卡应该像这个例子一样工作： https://getbootstrap.com/javascript/#tabs-examples 我们只想切换选项卡中的内容.如果不需要新模板,我们怎么做呢？我们的详细模板是这样的： ion-view view-title="{{item.summ

我们正在构建一个包含三个选项卡的模板.这些选项卡应该像这个例子一样工作： https://getbootstrap.com/javascript/#tabs-examples

我们只想切换选项卡中的内容.如果不需要新模板,我们怎么做呢？

我们的详细模板是这样的：

<ion-view view-title="{{item.summary.name}}">
  <ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
  </ion-nav-buttons>


  <div class="bar bar-subheader bar-assertive">
    <ion-tabs class="tabs-background-assertive tabs-color-light">
      <ion-tab title="Summary">
        <ion-nav-view name="summary" ></ion-nav-view>
      </ion-tab>

      <ion-tab title="Ingridents">
        <ion-nav-view name="ingdts"></ion-nav-view>
      </ion-tab>

      <ion-tab title="Videos">
        <ion-nav-view name="video"></ion-nav-view>
      </ion-tab>

    </ion-tabs>
  </div>

</ion-view>

我们尝试了这个,https://stackoverflow.com/a/31506520/170445但它没有用.

解决方法

如果我理解正确,您可以将选项卡的离子内容包装在离子窗格中以使用静态选项卡：

<ion-tab title="Summary">
  <ion-pane>
    <ion-content>
      <!-- Tab content here -->
      Summary content
    </ion-content>
  </ion-pane> 
</ion-tab>

这是一个codepen example

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!