如何轻松制作离子标签导航

Question

因为我最近开始使用 "ionic"，所以我在制作 "tabs navigation" 时遇到了问题。

我是按照一个简单的教程，做了一个有两个标签的导航，但是我不能做三个标签，它不能正常工作，恐怕我不明白这些标签的概念.

这是我很棒的代码：

<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

在您 contact 州的视图中，您仍然有 help 作为视图：

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

Codepen

Answer 2

我会尽力向您解释它是如何工作的。

所以在你的 app.js 文件中你有路由配置。此路由将允许您在 url 和模板 (file.html) 处关联状态。参考：Ui-router

在您的 html 页面中：该指令 ui-sref="help" 将调用状态 "help" 并显示一个页面 (templateUrl)。在这种情况下，这将显示 help.html

的内容

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

在此示例中，每个 html 页面都在主 html 页面中：示例：这是 help.html 页面

    <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>

你有一个错误：

 .state('contact', {
  url: '/contact',
   views: {
      contact: { // here it's not help but contact
       templateUrl: 'contact.html'
     }
    }
 })

希望对您有所帮助，如果我的英语不正确，请见谅。本教程可以帮助您：Ionic routing tutorial

如何轻松制作离子标签导航

How to easily make ionic tabs navigation

javascript

tabs

angularjs

ionic-framework