ionic 加载动画
ion-spinner
ionSpinner 提供了许多种旋转加载的动画图标。当你的界面加载时，你就可以呈现给用户相应的加载图标。
该图标采用的是SVG。
用法
<ion-spinner icon="spiral"></ion-spinner> //默认用法
像大部分其他的ionic组件一样，spinner也可以使用ionic的标准颜色命名规则，就像下面这样：
<ion-spinner class="spinner-energized"></ion-spinner>
实例
【HTML 代码】
<ion-content scroll="false" class="has-header">
<p>
<ion-spinner icon="android"></ion-spinner>
<ion-spinner icon="ios"></ion-spinner>
<ion-spinner icon="ios-small"></ion-spinner>
<ion-spinner icon="bubbles" class="spinner-balanced"></ion-spinner>
<ion-spinner icon="circles" class="spinner-energized"></ion-spinner>
</p>
<p>
<ion-spinner icon="crescent" class="spinner-royal"></ion-spinner>
<ion-spinner icon="dots" class="spinner-dark"></ion-spinner>
<ion-spinner icon="lines" class="spinner-calm"></ion-spinner>
<ion-spinner icon="ripple" class="spinner-assertive"></ion-spinner>
<ion-spinner icon="spiral"></ion-spinner>
</p>
</ion-content>
【CSS 代码】
body {
cursor: url('http://www.runob.com/try/demo_source/finger.png'), auto;
}
p {
text-align: center; margin-bottom: 40px !important;
}
.spinner svg {
width: 19% !important; height: 85px !important;
}
【JavaScript 代码】
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope) {
});
尝试一下 »
效果如下所示：
录像2.gif
ionic 选项卡栏操作
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>
尝试一下 »
效果如下所示：
录像1.gif
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);