选项卡栏操作
编辑教程选项卡栏操作
ion-tabs
ion-tabs 是有一组页面选项卡组成的选项卡栏。可以通过点击选项来切换页面。
对于 iOS,它会出现在屏幕的底部,Android会出现在屏幕的顶部(导航栏下面)。
用法
<ion-tabs class="tabs-positive tabs-icon-only">
<ion-tab title="首页" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
<!-- 标签 1 内容 -->
</ion-tab>
<ion-tab title="关于" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
<!-- 标签 2 内容 -->
</ion-tab>
<ion-tab title="设置" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
<!-- 标签 3 内容 -->
</ion-tab>
</ion-tabs>
效果如下所示:
API
属性 | 类型 | 详情 |
---|---|---|
delegate-handle(可选) | 字符串 | 该句柄用$ionicTabsDelegate来标识这些选项卡。 |
ion-tab
隶属于ionTabs
包含一个选项卡内容。该内容仅存在于被选中的给定选项卡中。
每个ionTab都有自己的浏览历史。
用法
<ion-tab
title="Tab!"
icon="my-icon"
href="#/tab/tab-link"
on-select="onTabSelected()"
on-deselect="onTabDeselected()">
</ion-tab>
API
属性 | 类型 | 详情 |
---|---|---|
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实例。
用法
<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])
选择标签来匹配给定的索引。
参数 | 类型 | 详情 |
---|---|---|
index | 数值 | 选择标签的索引。 |
shouldChangeHistory(可选) | 布尔值 | 此选项是否应该加载这个标签的浏览历史(如果存在), 并使用,或仅加载默认页面。默认为false。 提示:如果一个ion-nav-view在选项卡里,你可能需要设置它为true。 |
selectedIndex()
返回值: 数值, 被选中标签的索引,如 -1。
$getByHandle(handle)
参数 | 类型 |
---|---|
handle | 字符串 |
例如:
$ionicTabsDelegate.$getByHandle('my-handle').select(0);
Mos固件,小电视必刷固件
ES6 教程
Vue.js 教程
JSON 教程
jQuery 教程
HTML 教程
HTML 5 教程
CSS 教程
CSS3 教程
JavaScript 教程
DHTML 教程
JSON在线格式化工具
JS在线运行
JSON解析格式化
jsfiddle中国国内版本
JS代码在线运行
PHP代码在线运行
Java代码在线运行
C语言代码在线运行
C++代码在线运行
Python代码在线运行
Go语言代码在线运行
C#代码在线运行
JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。
大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
选择支付方式:
立即支付
¥
9.99
无法付款,请点击这里
金额: 0 元
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟