欢迎光临
梦想从学习开始!

ionic 选项卡栏操作 | 小熊教程

ionic 选项卡栏操作

Tips:您正在学习的是ionic 选项卡栏操作 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8685 ,您可通过标签查询系列课程。祝您学习愉快!


ion-tabs

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

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

用法

Tips:您正在学习的是ionic 选项卡栏操作 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8685 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

实例

<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

Tips:您正在学习的是ionic 选项卡栏操作 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8685 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

属性 类型 详情
delegate-handle (可选) 字符串

该句柄用$ionicTabsDelegate来标识这些选项卡。


ion-tab

隶属于ionTabs

包含一个选项卡内容。该内容仅存在于被选中的给定选项卡中。

每个ionTab都有自己的浏览历史。

用法

Tips:您正在学习的是ionic 选项卡栏操作 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8685 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

 <ion-tab   title="Tab!"   icon="my-icon"   href="#/tab/tab-link"   on-select="onTabSelected()"   on-deselect="onTabDeselected()"> </ion-tab> 

API

Tips:您正在学习的是ionic 选项卡栏操作 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8685 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

属性 类型 详情
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实例。

用法

Tips:您正在学习的是ionic 选项卡栏操作 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8685 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

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

方法

Tips:您正在学习的是ionic 选项卡栏操作 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8685 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

 select(index, [shouldChangeHistory]) 

选择标签来匹配给定的索引。

参数 类型 详情
index 数值

选择标签的索引。

shouldChangeHistory (可选) 布尔值

此选项是否应该加载这个标签的浏览历史(如果存在),并使用,或仅加载默认页面。默认为false。提示:如果一个ion-nav-view在选项卡里,你可能需要设置它为true。

selectedIndex()

返回值: 数值, 被选中标签的索引,如 -1。

 $getByHandle(handle) 
参数 类型 详情
handle 字符串

例如:

$ionicTabsDelegate.$getByHandle('my-handle').select(0);
赞(0) 打赏
未经允许不得转载:小熊分享邦 » ionic 选项卡栏操作 | 小熊教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏