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>

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

Ionic Javascript 选项卡

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

选项卡属性

属性 类型 细节
标题 细绳 选项卡的标题。
链接地址 细绳 用于选项卡导航的链接。
图标 细绳 选项卡的图标。
图标打开 细绳 被选中时选项卡的图标。
图标关闭 细绳 未选择时选项卡的图标。
徽章 表达 选项卡的徽章。
徽章式 表达 选项卡的徽章样式。
选择时 表达 选择选项卡时调用
开启-取消选择 表达 取消选择选项卡时调用
隐 表达 用于隐藏选项卡。
残疾人 表达 用于禁用选项卡。

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

委托方法

方法 参数 类型 细节
选定索引() / 数字 返回所选选项卡的索引。
$getByHandle(参数1) 处理 细绳 用于将方法连接到具有相同句柄的特定选项卡视图。可以使用delegate-handle = "my-handle"属性将句柄添加到ion-tabs。 $ionicTabsDelegate.$getByHandle('my-handle').selectedIndex();