Ionic 选项卡栏操作
🌙
手机阅读
本文目录结构
ionic 选项卡栏操作
ion-tabs
ion-tabs 是有一组页面选项卡组成的选项卡栏。可以通过点击选项来切换页面。
对于 iOS，它会出现在屏幕的底部，Android 会出现在屏幕的顶部（导航栏下面）。
用法
实例
<ion-tabs class="tabs-positive tabs-icon-only">
<ion-tab title="首页" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
<!-- 标签 1 内容 -->
</ion-tab>
<ion-tab title="关于" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
<!-- 标签 2 内容 -->
</ion-tab>
<ion-tab title="设置" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
<!-- 标签 3 内容 -->
</ion-tab>
</ion-tabs>
API
| 属性 | 类型 | 详情 |
该句柄用 |
|---|
ion-tab
隶属于 ionTabs
包含一个选项卡内容。该内容仅存在于被选中的给定选项卡中。
每个 ionTab 都有自己的浏览历史。
用法
<ion-tab
title="Tab!"
icon="my-icon"
href="#/tab/tab-link"
on-select="onTabSelected()"
on-deselect="onTabDeselected()">
</ion-tab>
API
| 属性 | Arrt_Type | 详情 |
|---|---|---|
| title |
字符串
|
选项卡的标题。 |
|
href
(可选)
|
字符串
|
当触碰的时候，该选项卡将会跳转的的链接。 |
|
icon
(可选)
|
|
选项卡的图标。如果给定值，它将成为ion-on和ion-off的默认值。 |
|
icon-on
(可选)
|
|
被选中标签的图标。 |
|
icon-off
(可选)
|
字符串
|
没被选中标签的图标。 |
选项卡上的徽章（通常是一个数字）。 |
|
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])
选择标签来匹配给定的索引。
<table class="reference">
<thead>
<tr>
<th>参数</th>
<th>类型</th>
<th>详情</th>
</tr>
</thead>
<tbody>
<tr>
<td>
index
</td>
<td>
<code>数值</code>
</td>
<td>
<p>选择标签的索引。</p>
</td>
</tr>
<tr>
<td>
shouldChangeHistory
<div><em>(可选)</em></div>
</td>
<td>
<code>布尔值</code>
</td>
<td>
<p>此选项是否应该加载这个标签的浏览历史（如果存在），并使用，或仅加载默认页面。默认为false。提示：如果一个<code>ion-nav-view</code>在选项卡里，你可能需要设置它为true。</p>
</td>
</tr>
</tbody>
</table>
selectedIndex()
返回值： 数值，被选中标签的索引，如 -1。
$getByHandle(handle)
| 参数 | 类型 | 详情 |
|---|---|---|
| handle |
字符串
|
例如：
$ionicTabsDelegate.$getByHandle('my-handle').select(0);
