ionic 加载动画+选项卡栏操作

ionic 加载动画

ion-spinner

ionSpinner 提供了许多种旋转加载的动画图标。当你的界面加载时，你就可以呈现给用户相应的加载图标。
该图标采用的是SVG。

用法

 //默认用法

像大部分其他的ionic组件一样，spinner也可以使用ionic的标准颜色命名规则，就像下面这样：

实例

【HTML 代码】

【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会出现在屏幕的顶部(导航栏下面)。

用法

尝试一下 »

效果如下所示：

录像1.gif

API

属性	类型	详情
delegate-handle(可选)	字符串	该句柄用$ionicTabsDelegate来标识这些选项卡。

---

ion-tab

隶属于ionTabs
包含一个选项卡内容。该内容仅存在于被选中的给定选项卡中。
每个ionTab都有自己的浏览历史。

用法

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实例。

用法

 
   

     
      你好，标签1！ 
      选择标签2 
     
    你好标签2！ 
  

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