ionic 选项卡栏操作

ion-tabs

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

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

用法

<ion-tabs class="tabs-positive tabs-icon-only">

  <ion-tab title="首页" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">

    <!-- 标签 1 内容 -->

  </ion-tab>

  <ion-tab title="关于" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">

    <!-- 标签 2 内容 -->

  </ion-tab>

  <ion-tab title="设置" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">

    <!-- 标签 3 内容 -->

  </ion-tab>

</ion-tabs>

尝试一下 »

效果如下所示：

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

完整源码：

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

<link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">

<script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.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>

巴特西

ionic js ion-tabs选项卡栏操作

ionic 选项卡栏操作

ion-tabs

用法

API

ion-tab

用法

API

$ionicTabsDelegate

用法

方法

最新文章

热门文章