在第一段ionic示例的基础上增加底部导航

demo2.html

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8">
    <title>angular-demo2</title>
    <link href="../lib/ionic/css/ionic.css" rel="stylesheet">
    <script type="text/javascript" src="../lib/ionic/js/ionic.bundle.js" charset="utf-8"></script>        
</head>
<body>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
    <script type="text/javascript">
    var app = angular.module('app',['ionic']);
    
    app.controller('DashCtrl', function($scope) {})

    .controller('AccountCtrl', function($scope) {
      $scope.settings = {
        enableFriends: true
      };
    });
    
    app.config(function($stateProvider, $urlRouterProvider) {
          $stateProvider
          .state('tab', {
            url: "/tab",
            abstract: true,
            templateUrl: "templates/tabs.html"
          })
          .state('tab.dash', {
            url: '/dash',
            views: {
              'tab-dash': {
                templateUrl: 'templates/dash.html',
                controller: 'DashCtrl'
              }
            }
          })
          .state('tab.account', {
            url: '/account',
            views: {
              'tab-account': {
                templateUrl: 'templates/account.html',
                controller: 'AccountCtrl'
              }
            }
          });

          $urlRouterProvider.otherwise('/tab/dash');

        });

    </script>
</body>
</html>

 

tabs.html

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <!-- Dashboard Tab -->
  <ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
    <ion-nav-view name="tab-dash"></ion-nav-view>
  </ion-tab>

  <!-- Account Tab -->
  <ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account">
    <ion-nav-view name="tab-account"></ion-nav-view>
  </ion-tab>


</ion-tabs>

 

dash.html

<ion-view view-title="Dashboard">
  <ion-content class="padding">
    <div class="list card">
      <div class="item item-divider">Recent Updates</div>
      <div class="item item-body">
        <div>
          There is a fire in <b>sector 3</b>
        </div>
      </div>
    </div>
    <div class="list card">
      <div class="item item-divider">Health</div>
      <div class="item item-body">
        <div>
          You ate an apple today!
        </div>
      </div>
    </div>
    <div class="list card">
      <div class="item item-divider">Upcoming</div>
      <div class="item item-body">
        <div>
          You have <b>29</b> meetings on your calendar tomorrow.
        </div>
      </div>
    </div>
  </ion-content>
</ion-view>

 

account.html

<ion-view view-title="Account">
  <ion-content>
    <ion-list>
    <ion-toggle  ng-model="settings.enableFriends">
        Enable Friends
    </ion-toggle>
    </ion-list>
  </ion-content>
</ion-view>

 

注意在配置路由的时候导航项的内容是不同的，添加了一个views子项

 

整个示例用到了七个ionic的标签：

ion-nav-bar 页面的头部导航bar
ion-nav-view 页面的正文内容
ion-view 页面内容
ion-nav-back-button 后退按钮（新增）
ion-tabs 页面导航栏（新增）
ion-tab 页面导航项（新增）
ion-toggle 开关项（新增）
posted @ 2016-09-16 21:04  魔豆  阅读(2370)  评论(0)  编辑  收藏  举报