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属性