Ionic Javascript标签

对于任何导航类型或在应用内选择不同的页面，选项卡都是有用的模式。Android设备屏幕顶部会显示相同的标签，IOS设备底部会显示相同的标签。

使用标签

通过使用 ion-tabs 作为容器元素和 ion-tab 作为内容元素，可以将选项卡添加到应用程序中。我们会将其添加到 index.html ，但您可以将其添加到应用内的任何HTML文件中。请确保不要在 Ionic内容中 添加它以避免随附的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>

输出将如以下屏幕截图所示。

IonicJavascript标签

有一些API可用于 Ionic标签 元素。您可以将其添加为属性，如上例中所示，我们使用 title ， icon-on 和 icon-off 。最后两个用于区分选定的选项卡与其余选项卡。如果查看上图，可以看到第一个选项卡已被选中。您可以检查下表中的其余属性。

标签属性

属性 类型 详细
title string 选项卡的标题。
href string 用于选项卡导航的链接。
icon string 选项卡的图标。
icon-on string 选中时选项卡的图标。
icon-off string 未选中时选项卡的图标。
badge expression 选项卡的徽章。
badge-style expression 选项卡的徽章样式。
on-select expression 选中选项卡时调用
on-deselect expression 取消选择选项卡时调用
hidden expression 用于隐藏选项卡。
disabled expression 用于禁用选项卡。

选项卡还有自己的委托服务，可以更轻松地控制应用程序中的所有选项卡。它可以在控制器中注入，并有几种方法，如下表所示。

代表方法

方法 参数 类型 详细
selectedIndex() / number 返回所选选项卡的索引。
$getByHandle(parameter1) handle string

用于将方法连接到具有相同句柄的特定选项卡视图。可以使用delegate-handle =“my-handle”属性将句柄添加到ion-tabs。

$ionicTabsDelegate.$getByHandle('my-handle').selectedIndex();