javascript - 如何轻松制作 ionic 标签导航

Question

当我最近开始使用“ionic”时，我在制作“选项卡导航”时遇到了问题。

我正在遵循一个简单的教程，我做了一个带有两个选项卡的导航，但我无法制作三个选项卡，它无法正常工作，恐怕我不理解这些选项卡的概念。

CODEPEN CODE + DEMO

这是我很棒的代码:

<ion-tabs class="tabs-striped tabs-top tabs-background-dark tabs-color-energized">

        <ion-tab title="help"ui-sref="help">
           <ion-nav-view name="help"></ion-nav-view>
        </ion-tab>

        <ion-tab title="home" ui-sref="home">
            <ion-nav-view name="home"></ion-nav-view> 
        </ion-tab>

     <ion-tab title="contact" ui-sref="contact">
            <ion-nav-view name="contact"></ion-nav-view> 
        </ion-tab>



    </ion-tabs> 
 <script type="text/ng-template" id="home.html">
  <ion-view title="Home">
    <ion-content padding="true">
      <h2>Home Page</h2>
      <p>Here's the main route for the app.</p>
    </ion-content>
  </ion-view>
</script>

<script type="text/ng-template" id="help.html">
  <ion-view title="Help">
    <ion-content padding="true">
       <h2>Using the app</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis architecto hic officia quasi excepturi sequi deleniti maiores consectetur veritatis sint?</p>
    </ion-content>
  </ion-view>
</script>

      <script type="text/ng-template" id="contact.html">
  <ion-view title="Contact">
    <ion-content padding="true">
       <h2>Using the app</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis architecto hic officia quasi excepturi sequi deleniti maiores consectetur veritatis sint?</p>
    </ion-content>
  </ion-view>
</script>

app.js:

.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/')

$stateProvider
    .state('home', {
  url: '/home',
  views: {
    home: {
      templateUrl: 'home.html'
    }
  }
})

 .state('help', {
  url: '/help',
  views: {
    help: {
      templateUrl: 'help.html'
    }
  }
})

.state('contact', {
  url: '/contact',
  views: {
    help: {
      templateUrl: 'contact.html'
    }
  }
})


})

http://codepen.io/stranger90/pen/MwjGPY

Answer 1

在您的联系人 View 中，您仍然有帮助作为 View :

.state('contact', {
    url: '/contact',
        views: {
            help: { // <-- Change this to 'contact'
                templateUrl: 'contact.html'
            }
        }
})

Codepen