Ionic基础教程

指令标签（2）

前言

本章节继续上一节的内容：Ionic 中的“指令标签”。

ion-spinner

等待图标。

在前面的案例中，使用 ion-refresher 和 ion-infinite-scroll 时，可以设置一个等待图标，它是一个 SVG 动画。其实这个等待图标可以单独使用，可用在任何需要向用户提示需要等待的地方，以增强用户体验。

icon 属性用来设置需要使用何种动画。目前支持的值有：android、ios、ios-small、bubbles、circles、crescent、dots、lines、ripple、spiral。点击这里查看最新可支持的icon属性。

还可通过样式设置其大小和颜色。

示例

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title>指令标签</title>
<link href="css/ionic.css" rel="stylesheet" />
<style type="text/css">
/** 自定义了一个 spinner 的样式 **/
.mySpinner svg{width:60px;height:60px;}
</style> <script src="js/ionic.bundle.min.js"></script>
</head>
<body ng-app="myApp">
<ion-header-bar class="bar-positive">
<div class="title">标题</div>
</ion-header-bar>
<ion-content class="text-center">
<!-- 默认的图标和样式 -->
<ion-spinner></ion-spinner><br/>
<!-- 用 icon 属性设置图标 -->
<ion-spinner icon="lines"></ion-spinner><br/>
<!-- 用 icon 属性设置图标，并用 class spinner-positive 设置了颜色 -->
<ion-spinner icon="lines" class="spinner-positive"></ion-spinner><br/>
<!-- 用 icon 属性设置图标，并用 class spinner-positive 设置了颜色，用 class mySpinner 设置了大小，mySpinner 为自定义的样式 -->
<ion-spinner icon="lines" class="spinner-positive mySpinner"></ion-spinner>
</ion-content>
<ion-footer-bar class="bar-calm">
<button class="button button-clear">Left</button>
<div class="title">Title</div>
<button class="button button-clear">Right</button>
</ion-footer-bar>
<script type="text/javascript">
var app = angular.module('myApp', ['ionic']);
</script>
</body>
</html>

ion-checkbox

复选框。

示例

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title>指令标签</title>
<link href="css/ionic.css" rel="stylesheet" />
<script src="js/ionic.bundle.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<ion-header-bar class="bar-positive">
<div class="title">标题</div>
</ion-header-bar>
<ion-content>
<!-- 默认样式 -->
<ion-checkbox></ion-checkbox>
<!-- 选中状态 -->
<ion-checkbox ng-model="isChecked"></ion-checkbox>
<!-- 用 class checkbox-calm 设置了颜色 -->
<ion-checkbox class="checkbox-calm"></ion-checkbox>
<!-- 带文本的复选框，会在复选框后显示文本，默认靠左对齐 -->
<ion-checkbox>这是文本</ion-checkbox>
<!-- 带文本的复选框，用 class text-center 使文本居中对齐 -->
<ion-checkbox class="text-center">这是文本</ion-checkbox>
<!-- 带文本的复选框，用 class text-right 使文本靠右对齐 -->
<ion-checkbox class="text-right">这是文本</ion-checkbox>
</ion-content>
<ion-footer-bar class="bar-calm">
<button class="button button-clear">Left</button>
<div class="title">Title</div>
<button class="button button-clear">Right</button>
</ion-footer-bar>
<script type="text/javascript">
var app = angular.module('myApp', ['ionic']);
app.controller('myController', function ($scope) {
$scope.isChecked = true;
});
</script>
</body>
</html>

ion-radio

单选框。可将多个单选框归纳为一组，同一组内只会有一个单选框会处于选中状态。同一页面中未被分组的所有单选框将被划分为同一组。name 属性相同即表示属于同一组。

示例

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title>指令标签</title>
<link href="css/ionic.css" rel="stylesheet" />
<script src="js/ionic.bundle.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<ion-header-bar class="bar-positive">
<div class="title">标题</div>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item class="item-divider item-dark">
未分组
</ion-item>
<!-- 所有未设置 name 属性的为同一组 -->
<!-- 默认样式，文本是靠左对齐的 -->
<ion-radio>未分组选项一</ion-radio>
<!-- 用 class text-center 使文本居中对齐 -->
<ion-radio class="text-center">未分组选项二</ion-radio>
<ion-item class="item-divider item-dark">
分组一
</ion-item>
<!-- name 相同的为同一组 -->
<!-- 用 class text-right 使文本靠右对齐 -->
<ion-radio name="g1" class="text-right">分组一选项一</ion-radio>
<!-- 用 icon ion-happy 设置图标 -->
<ion-radio name="g1" icon="ion-happy">分组一选项二</ion-radio>
<ion-item class="item-divider item-dark">
分组二
</ion-item>
<!-- 用 value 设置了值 -->
<!-- 用 ng-model 绑定数据 checkedVal，当 checkedVal 与 value 相等时，则该项为选中状态 -->
<ion-radio name="g2" value="21" ng-model="checkedVal">分组二选项一</ion-radio>
<!-- 当该项被选中时，会触发 ng-change 中定义的方法 g22Changed() -->
<ion-radio name="g2" value="22" ng-model="checkedVal" ng-change="g22Changed()">分组二选项二</ion-radio>
</ion-list>
</ion-content>
<ion-footer-bar class="bar-calm">
<button class="button button-clear">Left</button>
<div class="title">Title</div>
<button class="button button-clear">Right</button>
</ion-footer-bar>
<script type="text/javascript">
var app = angular.module('myApp', ['ionic']);
app.controller('myController', function ($scope) {
$scope.checkedVal = 21;
$scope.g22Changed = function () {
console.log('被选中的是：' + this.getValue());
};
});
</script>
</body>
</html>

ion-toggle

切换按钮。本质上就是个复选框，但其样式比较漂亮。

示例

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title>指令标签</title>
<link href="css/ionic.css" rel="stylesheet" />
<script src="js/ionic.bundle.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<ion-header-bar class="bar-positive">
<div class="title">标题</div>
</ion-header-bar>
<ion-content>
<ion-list>
<!-- 默认样式 -->
<ion-toggle>选项一</ion-toggle>
<!-- 用 class toggle-class 设置选中后的样式 -->
<ion-toggle toggle-class="toggle-calm">选项二</ion-toggle>
<!-- 用 ng-model 将其选中状态与 chk3 绑定起来，当 chk3 为 true 时就是选中状态，否则非选中状态 -->
<ion-toggle toggle-class="toggle-calm" ng-model="chk3">选项三</ion-toggle>
<!-- 文本默认是靠左对齐的，用 class text-center 使其居中对齐 -->
<ion-toggle class="text-center">选项四</ion-toggle>
<!-- 用 class text-right 使文本靠右对齐 -->
<ion-toggle class="text-right">选项五</ion-toggle>
<!-- ng-change 设置了当选中状态发生改变时触发的方法 chk6Changed -->
<!-- 注意，这里 ng-model 绑定的值是一个 object 的属性 -->
<ion-toggle ng-model="chk6.checked" ng-change="chk6Changed()">选项六</ion-toggle>
</ion-list>
</ion-content>
<ion-footer-bar class="bar-calm">
<button class="button button-clear">Left</button>
<div class="title">Title</div>
<button class="button button-clear">Right</button>
</ion-footer-bar>
<script type="text/javascript">
var app = angular.module('myApp', ['ionic']);
app.controller('myController', function ($scope) {
$scope.chk3 = true;
$scope.chk6 = {checked:true};
$scope.chk6Changed = function () {
console.log('选中状态：' + $scope.chk6.checked);
};
});
</script>
</body>
</html>

ion-list

展示一组数据的列表。列表的每一项用 ion-item 表示。

属性：

type：类别。允许的值有 list-inset、card，区别在于 card 列表有边框的阴影效果。

show-delete：是否显示子元素中的 ion-delete-button。boolean 值。

show-reorder：是否显示子元素中的 ion-reorder-button。boolean 值。

can-swipe：是否可滑动并将 ion-option-button 显示出来。boolean 值，默认为 true。

ion-delete-button：

删除按钮。一个 ion-item 内可有一个 ion-delete-button。始终显示在最左端。

ion-option-button：

选项按钮。一个 ion-item 内可有一个或多个 ion-option-button。默认是隐藏的，需向左滑动 ion-item 才会显示出来。

ion-reorder-button：

重新排序按钮。一个 ion-item 内可有一个 ion-reorder-button。始终显示在最右端。

on-reorder 属性为排序时调用的方法。

绑定数据

可用 ng-repeat 来展示列表项，也可用 collection-repeat。区别是：在展示的数据较多时，使用 collection-repeat 的效率要高于 ng-repeat，因为 collection-repeat 不会一次性将所有数据都渲染出来，而是只渲染可视区内的数据。两者在使用上没有区别。

示例一：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title>指令标签</title>
<!-- 引入了下载的包中的 ionic.css -->
<link href="css/ionic.css" rel="stylesheet" />
<!-- 引入了下载的包中的 ionic.bundle.min.js，该 js 文件中不仅有 Ionic 的 js，还包含有 angularjs -->
<script src="js/ionic.bundle.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<ion-header-bar class="bar-positive">
<div class="title">标题</div>
</ion-header-bar>
<ion-content>
<ion-list show-reorder="true">
<ion-item ng-repeat="item in users">
{{item.name}}（{{item.id}}）
<ion-reorder-button class="ion-navicon" on-reorder="onReorder(item, $fromIndex, $toIndex)"></ion-reorder-button>
</ion-item>
</ion-list>
</ion-content>
<ion-footer-bar class="bar-calm">
<button class="button button-clear">Left</button>
<div class="title">Title</div>
<button class="button button-clear">Right</button>
</ion-footer-bar>
<script type="text/javascript">
// 将 ionic 模块注入到 myApp 模块，否则 ionic 指令标签不会被解析
var app = angular.module('myApp', ['ionic']);
app.controller('myController', function ($scope) {
$scope.users = [
{ id: 1, name: 'aaa' },
{ id: 2, name: 'bbb' },
{ id: 3, name: 'ccc' },
{ id: 4, name: 'ddd' },
{ id: 5, name: 'eee' },
{ id: 6, name: 'fff' },
{ id: 7, name: 'ggg' },
{ id: 8, name: 'hhh' },
{ id: 9, name: 'iii' },
{ id: 10, name: 'jjj' }
];
$scope.onReorder = function (item, fromIndex, toIndex) {
var tmp = $scope.users[fromIndex];
$scope.users[fromIndex] = $scope.users[toIndex];
$scope.users[toIndex] = tmp;
};
});
</script>
</body>
</html>

示例二：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title>指令标签</title>
<!-- 引入了下载的包中的 ionic.css -->
<link href="css/ionic.css" rel="stylesheet" />
<!-- 引入了下载的包中的 ionic.bundle.min.js，该 js 文件中不仅有 Ionic 的 js，还包含有 angularjs -->
<script src="js/ionic.bundle.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<ion-header-bar class="bar-positive">
<div class="title">标题</div>
</ion-header-bar>
<ion-content>
<ion-list show-delete="true">
<ion-item collection-repeat="item in users">
{{item.name}}（{{item.id}}）
<ion-delete-button class="ion-minus-circled" ng-click="onDelClick()"></ion-delete-button>
</ion-item>
</ion-list>
</ion-content>
<ion-footer-bar class="bar-calm">
<button class="button button-clear">Left</button>
<div class="title">Title</div>
<button class="button button-clear">Right</button>
</ion-footer-bar>
<script type="text/javascript">
// 将 ionic 模块注入到 myApp 模块，否则 ionic 指令标签不会被解析
var app = angular.module('myApp', ['ionic']);
app.controller('myController', function ($scope) {
$scope.users = [
{ id: 1, name: 'aaa' },
{ id: 2, name: 'bbb' },
{ id: 3, name: 'ccc' },
{ id: 4, name: 'ddd' },
{ id: 5, name: 'eee' },
{ id: 6, name: 'fff' },
{ id: 7, name: 'ggg' },
{ id: 8, name: 'hhh' },
{ id: 9, name: 'iii' },
{ id: 10, name: 'jjj' }
];
$scope.onDelClick = function () {
console.log('被删除的是：' + this.item.id);
};
});
</script>
</body>
</html>

示例三：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title>指令标签</title>
<!-- 引入了下载的包中的 ionic.css -->
<link href="css/ionic.css" rel="stylesheet" />
<!-- 引入了下载的包中的 ionic.bundle.min.js，该 js 文件中不仅有 Ionic 的 js，还包含有 angularjs -->
<script src="js/ionic.bundle.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<ion-header-bar class="bar-positive">
<div class="title">标题</div>
</ion-header-bar>
<ion-content>
<ion-list show-delete="true">
<ion-item collection-repeat="item in users">
{{item.name}}（{{item.id}}）
<ion-option-button class="button-calm" ng-click="onOptClick()">设置</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
<ion-footer-bar class="bar-calm">
<button class="button button-clear">Left</button>
<div class="title">Title</div>
<button class="button button-clear">Right</button>
</ion-footer-bar>
<script type="text/javascript">
// 将 ionic 模块注入到 myApp 模块，否则 ionic 指令标签不会被解析
var app = angular.module('myApp', ['ionic']);
app.controller('myController', function ($scope) {
$scope.users = [
{ id: 1, name: 'aaa' },
{ id: 2, name: 'bbb' },
{ id: 3, name: 'ccc' },
{ id: 4, name: 'ddd' },
{ id: 5, name: 'eee' },
{ id: 6, name: 'fff' },
{ id: 7, name: 'ggg' },
{ id: 8, name: 'hhh' },
{ id: 9, name: 'iii' },
{ id: 10, name: 'jjj' }
];
$scope.onOptClick = function () {
console.log('点击的是：' + this.item.id);
};
});
</script>
</body>
</html>

ion-tabs

选项卡。一个 ion-tabs 可有一个或多个“选项”，用 ion-tab 表示。

可为 ion-tab 设置 title 属性，该属性的值将被显示为该“选项”的标题。

不要将 ion-tabs 放在 ion-content 内，否则可能会显示不正确。

应在 ion-tab 内放一个 ion-view，然后再在 ion-view 内放一个用来放置内容的 ion-content，否则可能会显示不正确。

若要隐藏标题栏，则为其加入 class tabs-item-hide。

示例

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title>指令标签</title>
<link href="css/ionic.css" rel="stylesheet" />
<script src="js/ionic.bundle.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<ion-header-bar class="bar-positive">
<div class="title">标题</div>
</ion-header-bar>
<!-- class tabs-positive 设置了选项卡标题栏的背景色 -->
<!-- class tabs-icon-top 设置选项卡标题栏中的图标显示在文字的上面，可设置的值还有：tabs-icon-left -->
<ion-tabs class="tabs-positive tabs-icon-top has-header">
<!-- 属性 title 将会显示为该“选项”的标题 -->
<!-- 属性 icon-on 为该“选项”被选中时显示的图标 -->
<!-- 属性 icon-off 为该“选项”未选中时显示的图标 -->
<ion-tab title="选项一" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
<!-- 将 ion-content 包在一个 ion-view 内，否则可能会显示错误 -->
<ion-view>
<ion-content>
这是选项一的内容<br/>
<button ng-click="switchTo(2)">切换到选项卡三</button>
</ion-content>
</ion-view>
</ion-tab>
<ion-tab title="选项二" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
<ion-view>
<ion-content>
这是选项二的内容<br/>
<button ng-click="switchTo(0)">切换到选项卡一</button>
</ion-content>
</ion-view>
</ion-tab>
<ion-tab title="选项三" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
<ion-view>
<ion-content>
这是选项三的内容<br/>
<button ng-click="switchTo(1)">切换到选项卡二</button>
</ion-content>
</ion-view>
</ion-tab>
</ion-tabs>
<script type="text/javascript">
var app = angular.module('myApp', ['ionic']);
// $ionicTabsDelegate 提供了用 js 代码操作选项卡的方法
app.controller('myController', function ($scope, $ionicTabsDelegate) {
$scope.switchTo = function (idx) {
console.log('当前选中的是：' + $ionicTabsDelegate.selectedIndex());
// $ionicTabsDelegate.select(...) 能使选项卡跳转到指定的“选项”，参数为目标“选项”的索引
$ionicTabsDelegate.select(idx);
console.log('跳转后选中的是：' + $ionicTabsDelegate.selectedIndex());
};
});
</script>
</body>
</html>

最后，来个广告

若你觉得此文不错，请分享，若认为尚需改进，请点讚。

结束语

Ionic基础教程 - 目录

关于我：google.com/+YFCAO
由nooong.com提供空间支援。