ionic 选项卡栏操作

ion-tabs

ion-tabs 是有一组页面选项卡组成的选项卡栏。可以通过点击选项来切换页面。

对于 iOS,它会出现在屏幕的底部,Android会出现在屏幕的顶部(导航栏下面)。

用法

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>芝麻教程(web3.xin)</title>
    <link href="//cdn.bootcss.com/ionic/1.3.1/css/ionic.min.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/ionic/1.3.1/js/ionic.bundle.js"></script>
    <script type="text/javascript">
      angular.module('ionicApp', ['ionic'])

      .controller('RootCtrl', function($scope) {
        $scope.onControllerChanged = function(oldController, oldIndex, newController, newIndex) {
          console.log('Controller changed', oldController, oldIndex, newController, newIndex);
          console.log(arguments);
        };
      })


      .controller('HomeCtrl', function($scope, $timeout, $ionicModal, $ionicActionSheet) {
        $scope.items = [];

        $ionicModal.fromTemplateUrl('newTask.html', function(modal) {
          $scope.settingsModal = modal;
        });

        var removeItem = function(item, button) {
          $ionicActionSheet.show({
            buttons: [],
            destructiveText: 'Delete Task',
            cancelText: 'Cancel',
            cancel: function() {
              return true;
            },
            destructiveButtonClicked: function() {
              $scope.items.splice($scope.items.indexOf(item), 1);
              return true;
            }
          });
        };

        var completeItem = function(item, button) {
          item.isCompleted = true;
        };

        $scope.onReorder = function(el, start, end) {
          ionic.Utils.arrayMove($scope.items, start, end);
        };

        $scope.onRefresh = function() {
          console.log('ON REFRESH');

          $timeout(function() {
            $scope.$broadcast('scroll.refreshComplete');
          }, 1000);
        }


        $scope.removeItem = function(item) {
          removeItem(item);
        };

        $scope.newTask = function() {
          $scope.settingsModal.show();
        };

        // Create the items
        for(var i = 0; i < 25; i++) {
          $scope.items.push({
            title: 'Task ' + (i + 1),
            buttons: [{
              text: 'Done',
              type: 'button-success',
              onButtonClicked: completeItem,
            }, {
              text: 'Delete',
              type: 'button-danger',
              onButtonClicked: removeItem,
            }]
          });
        }

      })

      .controller('TaskCtrl', function($scope) {
        $scope.close = function() {
          $scope.modal.hide();
        }
      });
    </script>
    
  </head>
  <body ng-controller="RootCtrl">
    
    <ion-tabs class="tabs-icon-only tabs-positive">

      <ion-tab title="Home" 
               icon-on="ion-ios7-filing" 
               icon-off="ion-ios7-filing-outline" 
               ng-controller="HomeCtrl">
        
        <ion-header-bar class="bar-positive">
          <button class="button button-clear" ng-click="newTask()">New</button>
          <h1 class="title">Tasks</h1>
        </ion-header-bar>
        
        <ion-content has-tabs="true" on-refresh="onRefresh()">

          <ion-refresher></ion-refresher>
          <ion-list scroll="false" on-refresh="onRefresh()"
                    s-editing="isEditingItems" 
                    animation="fade-out"
                    delete-icon="icon ion-minus-circled">
            <ion-item ng-repeat="item in items"
                      item="item"
                      buttons="item.buttons"
                      can-delete="true"
                      can-swipe="true"
                      on-delete="deleteItem(item)"
                      ng-class="{completed: item.isCompleted}">
              {{item.title}}
              <i class="{{item.icon}}"></i>
            </ion-item>
          </ion-list>
        </ion-content>
      </ion-tab>

      <ion-tab title="About" icon-on="icon ion-ios7-clock" icon-off="icon ion-ios7-clock-outline">
        <header class="bar bar-header bar-positive">
          <h1 class="title">Deadlines</h1>
        </header>
        <ion-content has-header="true">
          <h1>Deadlines</h1>
        </ion-content>
      </ion-tab>

      <ion-tab title="Settings" icon-on="icon ion-ios7-gear" icon-off="icon ion-ios7-gear-outline">
        <header class="bar bar-header bar-positive">
          <h1 class="title">Settings</h1>
        </header>
        <ion-content has-header="true">
          <h1>Settings</h1>
        </ion-content>
      </ion-tab>
      
    </ion-tabs>

    <script id="newTask.html" type="text/ng-template">
      <div id="task-view" class="modal slide-in-up" ng-controller="TaskCtrl">
        <header class="bar bar-header bar-secondary">
          <h1 class="title">New Task</h1>
          <button class="button button-clear button-primary" ng-click="close()">Done</button>
        </header>
        <ion-content class="padding has-header">
          <input type="text" placeholder="I need to do this...">
        </ion-content>
      </div>
    </script>

  </body>
</html>

API

属性 类型 详情
delegate-handle
(可选)
字符串

该句柄用$ionicTabsDelegate来标识这些选项卡。

ion-tab

隶属于ionTabs

包含一个选项卡内容。该内容仅存在于被选中的给定选项卡中。

每个ionTab都有自己的浏览历史。

用法

<ion-tab
  title="Tab!"
  icon="my-icon"
  href="#/tab/tab-link"
  on-select="onTabSelected()"
  on-deselect="onTabDeselected()">
</ion-tab>

API

属性 类型 详情
title 字符串

选项卡的标题。

href
(可选)
字符串

但触碰的时候,该选项卡将会跳转的的链接。

icon
(可选)
字符串

选项卡的图标。如果给定值,它将成为ion-on和ion-off的默认值。

icon-on
(可选)
字符串

被选中标签的图标。

icon-off
(可选)
字符串

没被选中标签的图标。

badge
(可选)
表达式

选项卡上的徽章(通常是一个数字)。

badge-style
(可选)
表达式

选项卡上微章的样式(例,tabs-positive )。

on-select
(可选)
表达式

选项卡被选中时触发。

on-deselect
(可选)
表达式

选项卡取消选中时触发。

ng-click
(可选)
表达式

通常,点击时选项卡会被选中。如果设置了 ng-Click,它将不会被选中。 你可以用$ionicTabsDelegate.select()来指定切换标签。

$ionicTabsDelegate

授权控制ionTabs指令。

该方法直接调用$ionicTabsDelegate服务,控制所有ionTabs指令。用$getByHandle方法控制具体的ionTabs实例。

用法

<body ng-controller="MyCtrl">
  <ion-tabs>

    <ion-tab title="Tab 1">
      你好,标签1!
      <button ng-click="selectTabWithIndex(1)">选择标签2</button>
    </ion-tab>
    <ion-tab title="Tab 2">你好标签2!</ion-tab>

  </ion-tabs>
</body>
function MyCtrl($scope, $ionicTabsDelegate) {
  $scope.selectTabWithIndex = function(index) {
    $ionicTabsDelegate.select(index);
  }
}

方法

select(index, [shouldChangeHistory])

选择标签来匹配给定的索引。

参数 类型 详情
index 数值

选择标签的索引。

shouldChangeHistory
(可选)
布尔值

此选项是否应该加载这个标签的浏览历史(如果存在),并使用,或仅加载默认页面。默认为false。提示:如果一个ion-nav-view在选项卡里,你可能需要设置它为true。

selectedIndex()
返回值: 数值, 被选中标签的索引,如 -1。
$getByHandle(handle)
参数 类型 详情
handle 字符串

例如:

$ionicTabsDelegate.$getByHandle('my-handle').select(0);
联系我们

邮箱 626512443@qq.com
电话 18611320371(微信)
QQ群 235681453

Copyright © 2015-2022

备案号:京ICP备15003423号-3