指令标签（1）

Ionic 中提供了一些“指令标签”，是对 HTML 中现有标签的扩展。

标题栏，总是位于屏幕的顶部。

属性：

align-title：设置标题文字的对齐方式。允许的值有：left、right、center（默认值）。

no-tap-scroll：当点击标题时是否将内容区域自动滚动到最开始的位置。允许的值有：true、false（默认值）。

示例：

<ion-header-bar align-title="left"></ion-header-bar>

ion-header-bar 标签会被解析为 <div class="bar bar-header"></div>，因此，能与 class 为 bar bar-header 配合使用的 class 都可用在 ion-header-bar 上，例如可这样设置其背景色：

<ion-header-bar align-title="left" class="bar-positive"></ion-header-bar>

页脚栏，总是位于屏幕的底部。

属性：

align-title：设置标题文字的对齐方式。允许的值有：left、right、center（默认值）。

示例：

<ion-footer-bar align-title="left"></ion-footer-bar>

ion-footer-bar 标签会被解析为 <div class="bar bar-footer"></div>，因此，能与 class 为 bar bar-footer 配合使用的 class 都可用在 ion-footer-bar 上，例如可这样设置其背景色：

<ion-footer-bar align-title="left" class="bar-positive"></ion-footer-bar>

主体内容区，会占据除 header 和 footer 之外的剩余区域。当内容超过其可视区域时，可滚动显示被隐藏的部分。

属性：

overflow-scroll：若内容超过可视区域时，滚动时会有滚动条出现，默认使用的是 Ionic 定制的滚动条，若要使用系统默认的滚动条，则将此属性设为 true。

scroll：若设为 false，则表示禁止滚动。

示例：

<ion-content overflow-scroll="true"></ion-content>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

</head>
<body ng-app="myApp">

<ion-header-bar class="bar-positive">

</ion-header-bar>
<ion-content>

这是主体区域

</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']);

</script>

</body>
</html>

在浏览器中查看：

可滚动的容器。用户可按住内容进行拖动。

属性：

direction：可滚动的方向。允许的值有：x（x轴方向）、y（y轴方向，默认）、xy（x轴与y轴方向）。

zooming：是否允许捏拉缩放。允许的值有：true、false。

示例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

</head>
<body ng-app="myApp">

<ion-header-bar class="bar-positive">

</ion-header-bar>
<ion-content>

<ion-scroll direction="xy" class="col-60 col-offset-20" style="height:300px;border:1px solid #444">

这里是 ion-scroll 里的内容

</div>

</ion-scroll>

</div>

</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']);

</script>

</body>
</html>

在浏览器中查看：

可为 ion-content 或 ion-scroll 增加“下拉刷新”的功能。

属性：

on-refresh：当下拉到足够的距离并松开时触发的方法。

on-pulling：开始向下拉动时触发的方法。

pulling-text：向下拉动时显示的文本。

pulling-icon：向下拉动时显示的图标。

refreshing-icon：刷新数据时显示的等待图标。

spinner：刷新数据时显示的SVG动画。点击这里查看可用的SVG动画

disable-pulling-rotation：禁止下拉图标旋转动画。

刷新完毕后，应使用 $scope.$broadcast("scoll.refreshComplete") 通知框架数据已加载完毕。

示例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

</head>
<body ng-app="myApp" ng-controller="myController">

<ion-header-bar class="bar-positive">

</ion-header-bar>
<ion-content>

<ion-refresher pulling-text="wating....." on-refresh="getData()" spinner="android"></ion-refresher>
<ul class="list">

</ul>

</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, $http) {

$scope.users = [];
var pidx = 0; // 页码标识
$scope.getData = function () {

$http.get('/api/users/get_of_page', { params: {pidx:pidx} }).success(function (result) {

$scope.users = $scope.users.concat(result.data.lst);
$scope.$broadcast("scroll.refreshComplete"); // 通知框架数据已加载完毕
pidx++; // 将页码加1，下次再获取数据的时候应该是下一页的数据

});

};
$scope.getData(); // 先获取第一页的数据并展示出来

});

</script>

</body>
</html>

可为 ion-content 或 ion-scroll 增加“上拉刷新”的功能。

属性：

on-infinite：当滚动到距离底部一定距离时触发的方法，距离底部的距离由 distance 属性决定。

distance：距离底部的百分比，当滚动到距离底部达到此百分比时触发 on-infinite。默认 1%。

icon：数据载入时显示的图标。默认为 ion-load-d。

spinner：数据载入时显示的 SVG 动画。

immediate-check：是否在数据载入时立即检查滚动框范围。

刷新完毕后，应使用 $scope.$broadcast("scroll.infiniteScrollComplete"); 通知框架数据已加载完毕。

示例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

</head>
<body ng-app="myApp" ng-controller="myController">

<ion-header-bar class="bar-positive">

</ion-header-bar>
<ion-content>

</ul>
<ion-infinite-scroll on-infinite="getData()" immediate-check="true"></ion-infinite-scroll>

</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, $http) {

$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' }

];
var pidx = 0; // 页码标识
$scope.getData = function () {

$http.get('/api/users/get_of_page', { params: {pidx:pidx} }).success(function (result) {

$scope.users = $scope.users.concat(result.data.lst);
$scope.$broadcast("scroll.infiniteScrollComplete"); // 通知框架数据已加载完毕
pidx++; // 将页码加1，下次再获取数据的时候应该是下一页的数据

});

};

});

</script>

</body>
</html>

可使用 $ionicScrollDelegate 服务在代码中控制滚动容器（ion-content 或 ion-scroll）。常用方法有：

resize()：重新计算容器尺寸。当父元素大小发生变化时应该调用此方法。

scrollTop([useAnimate])：滚动到顶部。参数 useAnimate 是可选的，可用值为 true 或 false，表示滚动的过程是否使用动画。

scrollBottom([useAnimate])：滚动到底部。参数 useAnimate 是可选的，可用值为 true 或 false，表示滚动的过程是否使用动画。

scrollTo(left, top, [useAnimate])：滚动到指定位置。参数 left 为 x 轴坐标，参数 top 为 y 轴坐标，参数 useAnimate 是可选的，可用值为 true 或 false，表示滚动的过程是否使用动画。

scrollBy(left, top, [useAnimate])：滚动指定偏移量。参数 left 为 x 轴偏移量，参数 top 为 y 轴偏移量，参数 useAnimate 是可选的，可用值为 true 或 false，表示滚动的过程是否使用动画。

getScrollPosition()：取得当前滚动的位置。返回值为一个 object，有两个属性：left、top，分别表示 x 轴方向和 y 轴方向滚动的位置。

示例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

</head>
<body ng-app="myApp" ng-controller="myController">

<ion-header-bar class="bar-positive">

</ion-header-bar>
<ion-content>

<button class="button button-positive" ng-click="scrollBottom()">滚动到底部</button>
<ul class="list">

</ul>

</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, $ionicScrollDelegate) {

$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.scrollBottom = function () {

$ionicScrollDelegate.scrollBottom();

};

});

</script>

</body>
</html>

滑动块（幻灯片）。可用来做轮播图，当然也可用在任何需要滑动切换的场景。

一个 ion-slide-box 有一个或多个可切换显示的“块”，用 ion-slide 标签表示。

常用的方法及属性有：

active-slide：当前显示的“块”的索引。

does-continue：是否循环播放。boolean 值，默认为 false。

auto-play：是否自动播放。boolean 值。

slide-interval：自动播放间隔的时间。int 值，默认为 4000ms。

show-pager：是否显示分页器。boolean 值，默认为 true。

事件：

pager-click：分页器被点击后执行的方法。被点击的页码将作为参数传入到此方法中。

on-slide-changed：切换时执行的方法。当前页码将作为参数传入到此方法中。

$ionicSlideBoxDelegate：

$ionicSlideBoxDelegate 服务可用来在代码中操作 ion-slide-box。$ionicSlideBoxDelegate 的实例的 _instances 属性是页面中所有 ion-slide-box 的集合。

常用的方法有：

update()：当容器尺寸发生变化时，需调用 update() 重新渲染 ion-slide-box。

slide(to, [speed])：切换到指定页。参数 to 为切换到的页码，参数 speed 是可选的，表示从当前页切换到指定页所需的时间，单位是毫秒。

enableSlide([shouldEnable])：启用切换。参数 shouldEnable 为 boolean 值。

previous()：切换到前一页。

next()：切换到下一页。

currentIndex()：获取当前页的页码。

slidesCount()：获取所有页的数量，即共有多少页。

示例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

</head>
<body ng-app="myApp" ng-controller="myController">

<ion-header-bar class="bar-positive">

</ion-header-bar>
<ion-content>

<ion-slide-box auto-play="true" does-continue="true">

<ion-slide>

</ion-slide>
<ion-slide>

</ion-slide>
<ion-slide>

</ion-slide>

</ion-slide-box>
<div class="row">

<button ng-click="goLast()">切换到第一页</button>

</div>

</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, $ionicSlideBoxDelegate) {

$scope.goLast = function () {

// 一个页面中可能有多个 ion-slide-box，而我们要操作的是第1个。

var slideBox = $ionicSlideBoxDelegate._instances[0];
slideBox.slide(slideBox.slidesCount() - 1);

};

});

</script>

</body>
</html>

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

Ionic基础教程 - 目录

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

为网站开发远程直播教室的折腾过程及最终实现 - 使用face2face

开发Web版一对一远程直播教室只需30分钟 - 使用face2face网络教室

解决Chrome浏览器无法自动播放音频视频的问题，Uncaught(in promise) DOMException

Angular 2 + Material 2 基础教程——使用 Javascript

AngularJS基础教程

手把手教你玩转cordova（PhoneGap）

ionic-cyf-directives文档

Jade中文文档

LitJSON_MD 简明文档

开发成功游戏的指导方针

Ionic基础教程

前言

ion-header-bar

ion-footer-bar

ion-content

示例

ion-scroll

ion-refresher

ion-infinite-scroll

$ionicScrollDelegate

ion-slide-box

常用的方法及属性有：

事件：

$ionicSlideBoxDelegate：

示例：

最后，来个广告

结束语