ionic+angularjs 学习笔记.docx
《ionic+angularjs 学习笔记.docx》由会员分享，可在线阅读，更多相关《ionic+angularjs 学习笔记.docx（36页珍藏版）》请在冰豆网上搜索。
ionic+angularjs学习笔记
属性：
ng-click=”go（“html1”）”;可直接跳到页面
href="#/tab/systemIntro"
ui-sref="tabs.users"
标签：
顶部：
...
ion-header-bar
以上功能，顶部块标题居中内容不允许点击标题滚动到顶部
属性：
align-title=”left/center/right”;标题显示位置（顶部）
no-top-scroll=”true/false”
true:
不允许点击标题滚动到顶部
false：
默认，允许点击标题回到顶部
底部：
...
ion-footer-bar
属性：
align-title=”left/center/right”;标题显示位置（顶部）
ion-header-bar和ion-footer-bar经过编译后其样式类将分别被设置为.bar.bar-header和.bar.bar-footer
内容：
使用ion-content指令定义内容区域：
...
占据header和footer以外的剩余区域。
当内容超过可视区域时，ion-content可以滚动以显示被隐藏的部分。
滚动框:
ion-scroll指令声明一个可滚动的容器元素，用户可以按住内容进行拖动：
在使用ion-scroll时，需要显式指定滚动框元素及内容元素 的大小（高度和宽度）
--content-->
属性：
direction=”x|y|xy”内容可以滚动的方向。
允许值：
x|y|xy。
默认为y。
zooming=”true|false”是否支持pinch-to-zoom（捏拉缩放）。
允许值：
true|false。
拉动刷新:
ion-refresher
使用指令ion-refresher可以为滚动容器（ion-scroll或ion-content）增加拉动刷新/pull-to-refresh的功能：
属性：
on-refresh-当用户向下拉动足够的距离并松开时，执行此表达式
on-pulling-当用户开始向下拉动时，执行此表达式
pulling-text-当用户向下拉动时，显示此文本
pulling-icon-当用户向下拉动时，显示此图标如pulling-icon="ion-happy"下拉时显示笑脸图标
refreshing-icon-当用户向下拉动并松开后，显示的等待图标。
ionic推荐使用spinner代替这个属性
spinner-和refreshing-icon的作用一样，但spinner是基于SVG的动画
disable-pulling-rotation-禁止下拉图标旋转动画
注意在刷新完毕后，应当使用作用域的$broadcast（）方法通知框架：
$scope.$broadcast（"scoll.refreshComplete"）
例子：
Js文件：
angular.module（"ezApp",["ionic"]）
.controller（"ezCtrl",function（$scope）{
$scope.items=[];
varbase=1;
$scope.doRefresh=function（）{
for（vari=0;i<10;i++,base++）
$scope.items.unshift（["item",base].join（""））;
$scope.$broadcast（"scroll.refreshComplete"）;
};
}）;
Html文件
ion-refresher
{{item}}
滚动刷新:
...
使用ion-infinite-scroll指令可以为滚动容器（ion-scroll或ion-content）增加滚动刷新功能：
属性：
on-infinite-必须。
当滚动到底部时执行此表达式*distance-可选。
距底部距离百分比。
当距离底部超过此数值时,执行on-infinite。
默认为1%
icon-可选。
载入时显示的图标。
默认是ion-load-d。
ionic推荐使用spinner代替icon属性
spinner-可选。
载入时的spinner。
默认是ionSpinner
immediate-check-可选。
是否在载入时立即检查滚动框范围
例子：
{{item}}
Js文件
angular.module（"ezApp",["ionic"]）
.controller（"ezCtrl",function（$scope,$timeout）{
$scope.items=[];
varbase=0;
$scope.load_more=function（）{
$timeout（function（）{
for（vari=0;i<10;i++,base++）
$scope.items.push（["item",base].join（""））;
$scope.$broadcast（"scroll.infiniteScrollComplete"）;
},500）;
};
}）;
脚本接口:
可以使用服务$ionicScrollDelegate，通过脚本控制滚动容器（ion-scroll或ion-content）。
$ionicScrollDelegate服务提供的常用方法如下：
resize（）
重新计算容器尺寸。
当父元素大小变化时，应当调用此方法
scrollTop（[shouldAnimate]）
滚动到内容顶部。
shouldAnimate参数为true|false，表示是否使用动画展示滚动过程
scrollBottom（[shouldAnimate]）
滚动到内容底部。
shouldAnimate参数为true|false，表示是否使用动画展示滚动过程
scrollTo（left,top[,shouldAnimate]）
滚动到指定位置。
left和top分别表示要滚动到的x坐标和y坐标
scrollBy（left,top[,shouldAnimate]）
滚动指定偏移量。
left和top分别表示要滚动的x偏移量和y偏移量
getScrollPosition（）
读取当前视图位置。
返回值为一个JSON对象，具有left和top属性，分别表示x和y坐标
选项卡:
ion-tabs
使用ion-tabs指令声明选项卡，使用ion-tab声明选项页：
...
...
注意：
不要把ion-tabs指令放在ion-content之内
ion-tab的内容应当放入ion-view指令内，否则ionic在计算布局时可能出错
AngularJS编译后，ion-tabs元素将被应用.tabs样式，因此我们可以使用相关的样式调整ion-tabs的外观：
例子:
//tabs-positive设置的颜色
tab1content
ion-tabs:
声明条带风格
如果学习过课程：
ionic之CSS框架，应该记得使用.tabs-striped样式可以将选项卡声明为条带风格：
...
也可以通过$ionicConfigProvider在AngularJS的配置阶段，将选项卡设置为条带风格：
app.config（function（$ionicConfigProvider）{
$ionicConfigProvider.tabs.style（"striped"）;//参数可以是：
standard|striped
}）
ion-tabs:
声明位置
如果学习过课程：
ionic之CSS框架，应该记得使用.tabs-top可以将选项卡置于顶部标题栏之下：
...
也可以通过$ionicConfigProvider，在配置阶段设置选项卡的位置是在顶部还是底部：
app.config（function（$ionicConfigProvider）{
$ionicConfigProvider.tabs.position（"top"）;//参数可以是：
top|bottom
}）;
ion-tab：
标题文字、图标和徽章
ion-tab指令有以下属性用于设置文本、图标和徽章：
title -标题文字
标题文字是必须的。
该属性值将作为选项页的标题文字。
icon -标题图标
使用icon属性是可选的，该属性值将用来在标题文字旁边添加一个指定的图标。
这个属性的值将被作为icon-on和icon-off的默认值
icon-on -被选中状态的标题图标
如果一个选项页被选中，ion-tabs将使用icon-on属性的值绘制图标。
如果icon-on没有设置，那么ion-tabs就使用icon属性的值绘制图标
icon-off -未选中状态的标题图标
如果一个选项页没有被选中，ion-tabs将使用icon-off属性的值绘制图标。
如果icon-off没有设置，那么ion-tabs就使用icon属性的值绘制图标
badge -标题徽章
ion-tabs使用badge属性的值在标题文字旁边添加一个圆形的文字标识，通常用来显示数字。
这个属性是可选的，可以是一个具体的值，也可以是当前作用域上的一个变量
badge-style -标题徽章样式
使用badge-style属性设置徽章的样式，比如配色方案：
barge-{color}例：
badge-style="badge-assertive"红色
ion-tab:
隐藏、禁止
有些情况下，可能需要临时性地隐藏或禁止某个选项页，ion-tab提供了两个属性用来实现这个功能：
hidden -隐藏
hidden属性是当前作用域上的表达式。
当其值为true时，选项页将不可见
disabled -禁止
disabled属性是当前作用域上的表达式。
当值为true时，选项页将不响应用户的点击
ion-tab:
事件
ion-tab指令提供了挂接事件的属性：
on-select -选中事件
可选。
选项页从未选中状态切换到选中状态时执行此表达式
on-deselect -未选中事件
可选。
选项页从选中状态切换到未选中状态时执行此表达式
ng-click -点击事件
可选。
选项页被点击时执行此表达式。
如果这个属性被设置，那么ion-tabs将不会自动切换选项页，调用者需要手动调用$ionicTabsDelegate的select（）方法进行选项页切换
脚本接口:
$ionicTabsDelegate
使用$ionicTabsDelegate服务，我们可以在脚本中控制选项卡对象：
select（index） -选中指定的选项页
index参数从0开始，第一个选项页的index为0，第二个为1，依次类推。
selectedIndex（） -返回当前选中选项页的索引号
如果当前没有选中的选项页，则返回-1。
angular.module（"ezApp",["ionic"]）
.controller（"ezCtrl",function（$scope,$ionicTabsDelegate,$interval）{
varidx=0;
$interval（function（）{
idx=（idx+1）%3;
$ionicTabsDelegate.select（idx）;
},2000）;
}）;
列表:
ion-list
列表是常用的信息组织方式。
在ionic中，使用ion-list指令声明列表元素，使用ion-item指令声明成员元素：
...
...
...
ion-list指令提供以下属性用来定制列表的外观：
type -列表种类
type属性是可选的，可用来设置列表的种类：
list-inset|card。
这两种列表都产生内嵌的效果，区别在于card列表有边框的阴影效果。
show-delete -是否显示成员内的delete按钮
show-delete属性是可选的。
如果在成员内有delete按钮（ion-delete-button），使用这个属性来通知列表是否显示元素删除按钮。
允许的值为：
true|false
show-reorder -是否显示成员内的reorder按钮
show-reorder属性是可选的。
如果在成员内有reorder按钮（ion-reorder-button），使用这个属性来通知列表是否显示元素重排序按钮。
允许的值为：
true|false
can-swipe -是否支持滑动方式显示成员option按钮
can-swipe属性是可选的。
如果在成员内有option按钮（ion-option-button），使用这个属性来允许或禁止通过向左滑动成员来打开option按钮。
允许的值为：
true|false，默认为true。
ion-item:
成员按钮
ion-item有三种预定义的按钮：
ion-option-button -选项按钮。
一个ion-item内可以包含多个选项按钮。
选项按钮是隐藏的，需要用户向左滑动成员，以显示选项按钮。
可以使用ion-list的can-swipe属性允许或禁止滑动开启选项按钮。
使用ng-click指令来挂接点击事件监听函数，其原型如下：
varoptionListener=function（item）{...}
ionic在捕捉到用户的点击事件时，将调用此函数，并传入当前的item对象。
ion-delete-button -删除按钮
一个ion-item内最多有一个删除按钮。
删除按钮在显示时总是位于成员的最左端。
可以使用ion-list的show-delete属性显示或隐藏删除按钮
使用ng-click指令来挂接点击事件监听函数，其原型如下：
vardeleteListener=function（item）{...}
ionic在捕捉到用户的点击事件时，将调用此函数，并传入当前的item对象。
ion-reorder-button -重排按钮
一个ion-item内最多有一个重排按钮。
重排按钮在显示时总是位于成员的最右端。
可以使用ion-list的show-reorder属性显示或隐藏重排按钮
使用on-reorder属性来挂接重排事件监听函数，其原型如下：
varreorderListener=function（item,$fromIndex,$toIndex）{...}
ionic在捕捉到用户的重排事件时，将调用此函数，并传入当前的item对象、原序号及目标序号。
collection-repeat:
高性能的ng-repeat
collection-repeat指令和ng-repeat指令类似，但是更适用于大数据量的列表数据，这是因为，它只将处于可视区域的数据渲染到DOM上：
...
collection-repeat指令接受一个枚举表达式，同时可以附加以下的属性：
item-width-可选。
声明重复元素的宽度
item-height-可选。
声明重复元素的高度
item-render-buffer-可选。
需要载入渲染缓冲区的可视数据前后的数量。
默认为3
force-refresh-images-可选。
滚动时是否强制刷新图像。
允许值：
true|false
脚本接口:
$ionicListDelegate
如果需要从脚本中控制列表元素，可以使用$ionicListDelegate服务：
showReorder（[showReorder]） -显示/关闭排序按钮
showReorder的允许值为：
true|false。
可以使用一个作用域上的表达式
showDelete（[showDelete]） -显示/关闭删除按钮
showDelete的允许值为：
true|false。
可以使用一个作用域上的表达式
canSwipeItems（[canSwipeItems]） -是否允许通过滑动方式来显示成员选项按钮
canSwipeItems的允许值为：
true|false。
可以使用一个作用域上的表达式
closeOptionButtons（） -关闭所有选项按钮
侧边栏菜单:
ion-side-menus
侧边栏菜单是一个最多包含三个子容器的元素：
默认情况下，侧边栏菜单将只显示ion-side-menu-content容器的内容。
向左滑动时，将显示右边栏ion-side-menu容器的内容，向右滑动时，将显示左边栏ion-side-menu容器的内容。
在ionic中，使用ion-side-menus指令定义侧边栏菜单：
...
...
...
切换指令:
menu-toggle/menu-close
menu-toggle指令用来给元素增加切换侧栏内容显示状态的功能：
--切换左侧栏显示状态-->
--切换右侧栏显示状态-->
menu-close指令用来给元素增加关闭侧栏内容的功能：
与menu-toggle指令不同，menu-close不需要指定要关闭的侧栏是哪一边，它直接将当前打开的侧栏关闭。
例子：
ion-side-menu-content
主区域容器:
ion-side-menu-content
使用指令ion-side-menu-content声明侧边栏菜单的主显示区域容器：
...
ion-side-menu-content指令有以下可选属性：
drag-content -是否允许拖动内容打开侧栏菜单，默认为true。
允许值：
true|false。
当设置为false时，将禁止通过拖动内容打开侧栏菜单。
edge-drag-threshold -是否启用边距检测。
默认为false。
允许值：
number|true|false。
如果设置为一个正数，那么只有当拖动发生在距离边界小于这个数值的情况下，才触发侧栏显示。
当设置为true时，使用默认的25px作为边距阈值。
如果设置为false或0，则意味着禁止边距检测，可以在内容区域的任何地方拖动来打开侧栏。
侧边栏区域容器:
ion-side-menu
使用指令ion-side-menu声明侧边栏区域容器：
...
ion-side-menu指令有以下属性：
side -位于内容区的左边或右边
side属性
升级会员 