Ionic - Javascript 选项卡
选项卡是一种有用的模式，适用于任何导航类型或选择应用程序内的不同页面。相同的选项卡将显示在 Android 设备的屏幕顶部，以及 IOS 设备的屏幕底部。
使用选项卡
可以使用 ion-tabs 作为容器元素和 ion-tab 作为内容元素将选项卡添加到应用程序中。我们将把它添加到 index.html，但您可以将其添加到应用程序内的任何 HTML 文件中。请确保不要将其添加到 ion-content 中，以避免随之而来的 CSS 问题。
index.html 代码
<ion-tabs class = "tabs-icon-only">
<ion-tab title = "Home" icon-on = "ion-ios-filing"
icon-off = "ion-ios-filing-outline"></ion-tab>
<ion-tab title = "About" icon-on = "ion-ios-home"
icon-off = "ion-ios-home-outline"></ion-tab>
<ion-tab title = "Settings" icon-on = "ion-ios-star"
icon-off = "ion-ios-star-outline"></ion-tab>
</ion-tabs>
输出将如以下屏幕截图所示。
有可用于 ion-tab 元素的 API。您可以将其添加为属性，如上例所示，其中我们使用了 title、icon-on 和 icon-off。后两个用于区分选定的选项卡与其余选项卡。如果您查看上图，您会发现第一个选项卡已被选中。您可以在下表中查看其余属性。
选项卡属性
| 属性 | 类型 | 详细信息 |
|---|---|---|
| title | string | 选项卡的标题。 |
| href | string | 用于选项卡导航的链接。 |
| icon | string | 选项卡的图标。 |
| icon-on | string | 选中时选项卡的图标。 |
| icon-off | string | 未选中时选项卡的图标。 |
| badge | expression | 选项卡的徽章。 |
| badge-style | expression | 选项卡的徽章样式选项卡。 |
| on-select | 表达式 | 选择选项卡时调用 |
| on-deselect | 表达式 | 取消选择选项卡时调用 |
| hidden | 表达式 | 用于隐藏选项卡。 |
| disabled | 表达式 | 用于禁用选项卡。 |
选项卡还具有自己的委托服务，可以更轻松地控制应用程序内的所有选项卡。它可以在控制器中注入，并有多种方法，如下表所示。
委托方法
| 方法 | 参数 | 类型 | 详细信息 |
|---|---|---|---|
| selectedIndex() | / | number | 返回选定选项卡的索引。 |
| $getByHandle(parameter1) | handle | string | 用于将方法连接到具有相同句柄的特定选项卡视图。可以使用 delegate-handle = "my-handle" 属性将句柄添加到 ion-tabs。 $ionicTabsDelegate.$getByHandle('my-handle').selectedIndex(); |
