ionic+angularjs 学习笔记.docx

1、ionic+angularjs 学习笔记属性：ng-click = ”go(“html1”)”; 可直接跳到页面href=#/tab/systemIntroui-sref=tabs.users标签：顶部：. ion-header-bar以上功能，顶部块标题居中内容不允许点击标题滚动到顶部属性：align-title = ”left/center/right”; 标题显示位置(顶部)no-top-scroll = ”true/false”true:不允许点击标题滚动到顶部false：默认，允许点击标题回到顶部底部：. ion-footer-bar属性：align-title = ”left/ce

2、nter/right”; 标题显示位置(顶部)ion-header-bar和ion-footer-bar经过编译后其样式类将分别被设置为.bar.bar-header 和.bar.bar-footer内容：使用ion-content指令定义内容区域：.占据header和footer以外的剩余区域。当内容超过可视区域时，ion-content 可以滚动以显示被隐藏的部分。滚动框 : ion-scroll指令声明一个可滚动的容器元素，用户可以按住内容进行拖动：在使用ion-scroll时，需要显式指定滚动框元素及内容元素的大小（高度和宽度）属性：direction = ”x|y|xy” 内容可以滚

3、动的方向。允许值：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 - 当用户向

4、下拉动时，显示此图标 如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, ioni

5、c).controller(ezCtrl, function($scope) $scope.items = ; var base = 1; $scope.doRefresh = function() for(var i=0;i10;i+,base+) $scope.items.unshift(item ,base.join(); $scope.$broadcast(scroll.refreshComplete); ;);Html文件 ion-refresher item 滚动刷新 : .使用ion-infinite-scroll指令可以为滚动容器（ion-scroll或ion-content）

6、增加 滚动刷新功能：属性：on-infinite - 必须。当滚动到底部时执行此表达式* distance - 可选。距底部距离百分比。当距离底部超过此数值时,执行on-infinite。默认为1%icon - 可选。载入时显示的图标。默认是ion-load-d。ionic推荐使用spinner代替icon属性spinner - 可选。载入时的spinner。默认是ionSpinnerimmediate-check - 可选。是否在载入时立即检查滚动框范围例子： item Js文件angular.module(ezApp,ionic).controller(ezCtrl,function($s

7、cope,$timeout) $scope.items = ; var base = 0; $scope.load_more = function() $timeout(function() for(var i=0;i10;i+,base+) $scope.items.push(item ,base.join(); $scope.$broadcast(scroll.infiniteScrollComplete); ,500); ;);脚本接口 :可以使用服务$ionicScrollDelegate，通过脚本控制滚动容器（ion-scroll或ion-content）。 $ionicScroll

8、Delegate服务提供的常用方法如下：resize()重新计算容器尺寸。当父元素大小变化时，应当调用此方法scrollTop(shouldAnimate)滚动到内容顶部。shouldAnimate参数为true|false，表示是否使用动画展示滚动过程scrollBottom(shouldAnimate)滚动到内容底部。shouldAnimate参数为true|false，表示是否使用动画展示滚动过程scrollTo(left,top,shouldAnimate)滚动到指定位置。left和top分别表示要滚动到的x坐标和y坐标scrollBy(left,top,shouldAnimate)滚

9、动指定偏移量。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设置

10、的颜色 tab 1 contention-tabs : 声明条带风格如果学习过课程：ionic之CSS框架，应该记得使用.tabs-striped样式可以将选项卡 声明为条带风格：.也可以通过$ionicConfigProvider在AngularJS的配置阶段，将选项卡设置为条带风格：app.config(function($ionicConfigProvider) $ionicConfigProvider.tabs.style(striped); / 参数可以是： standard | striped)ion-tabs : 声明位置如果学习过课程：ionic之CSS框架，应该记得使用.ta

11、bs-top可以将选项卡置于 顶部标题栏之下：.也可以通过$ionicConfigProvider，在配置阶段设置选项卡的位置是在顶部还是底部：app.config(function($ionicConfigProvider) $ionicConfigProvider.tabs.position(top); /参数可以是：top | bottom);ion-tab ： 标题文字、图标和徽章ion-tab指令有以下属性用于设置文本、图标和徽章：title- 标题文字标题文字是必须的。该属性值将作为选项页的标题文字。icon- 标题图标使用icon属性是可选的，该属性值将用来在标题文字旁边添加一个

12、指定的图标。 这个属性的值将被作为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属性的值在标题文字旁边添加一个圆形的文字标识，通常用来 显示数字。这个属性是

13、可选的，可以是一个具体的值，也可以是当前作用域上的 一个变量badge-style- 标题徽章样式使用badge-style属性设置徽章的样式， 比如配色方案：barge-color例：badge-style=badge-assertive 红色ion-tab : 隐藏、禁止有些情况下，可能需要临时性地隐藏或禁止某个选项页，ion-tab提供了两个 属性用来实现这个功能：hidden- 隐藏hidden属性是当前作用域上的表达式。 当其值为true时，选项页将不可见disabled- 禁止disabled属性是当前作用域上的表达式。当值为true时，选项页将不响应 用户的点击ion-tab :

14、 事件ion-tab指令提供了挂接事件的属性：on-select- 选中事件可选。选项页从未选中状态切换到选中状态时执行此表达式on-deselect- 未选中事件可选。选项页从选中状态切换到未选中状态时执行此表达式ng-click- 点击事件可选。选项页被点击时执行此表达式。如果这个属性被设置，那么ion-tabs将不会 自动切换选项页，调用者需要手动调用$ionicTabsDelegate的select()方法进行 选项页切换脚本接口 : $ionicTabsDelegate使用$ionicTabsDelegate服务，我们可以在脚本中控制选项卡对象：select(index)- 选中指定

15、的选项页index参数从0开始，第一个选项页的index为0，第二个为1，依次类推。selectedIndex()- 返回当前选中选项页的索引号如果当前没有选中的选项页，则返回 -1。angular.module(ezApp,ionic).controller(ezCtrl,function($scope,$ionicTabsDelegate,$interval) var idx=0; $interval(function() idx = (idx + 1) % 3; $ionicTabsDelegate.select(idx); ,2000););列表 : ion-list列表是常用的信息组

16、织方式。在ionic中，使用ion-list指令声明列表 元素，使用ion-item指令声明成员元素：. .ion-list指令提供以下属性用来定制列表的外观：type- 列表种类type属性是可选的，可用来设置列表的种类： list-inset | card。这两种列表 都产生内嵌的效果，区别在于card列表有边框的阴影效果。show-delete- 是否显示成员内的delete按钮show-delete属性是可选的。如果在成员内有delete按钮（ion-delete-button），使用这个 属性来通知列表是否显示元素删除按钮。允许的值为：true | falseshow-reorder

17、- 是否显示成员内的reorder按钮show-reorder属性是可选的。如果在成员内有reorder按钮（ion-reorder-button），使用这个 属性来通知列表是否显示元素重排序按钮。允许的值为：true | falsecan-swipe- 是否支持滑动方式显示成员option按钮can-swipe属性是可选的。如果在成员内有option按钮（ion-option-button），使用这个 属性来允许或禁止通过向左滑动成员来打开option按钮。允许的值为：true | false ，默认为true。ion-item : 成员按钮ion-item有三种预定义的按钮：ion-opt

18、ion-button- 选项按钮。一个ion-item内可以包含多个选项按钮。选项按钮是隐藏的，需要用户向左 滑动成员，以显示选项按钮。可以使用ion-list的can-swipe属性允许或禁止 滑动开启选项按钮。使用ng-click指令来挂接点击事件监听函数，其原型如下：var optionListener = function(item).ionic在捕捉到用户的点击事件时，将调用此函数，并传入当前的item对象。ion-delete-button- 删除按钮一个ion-item内最多有一个删除按钮。删除按钮在显示时总是位于成员的最 左端。可以使用ion-list的show-delete属

19、性显示或隐藏删除按钮使用ng-click指令来挂接点击事件监听函数，其原型如下：var deleteListener = function(item).ionic在捕捉到用户的点击事件时，将调用此函数，并传入当前的item对象。ion-reorder-button- 重排按钮一个ion-item内最多有一个重排按钮。重排按钮在显示时总是位于成员的最 右端。可以使用ion-list的show-reorder属性显示或隐藏重排按钮使用on-reorder属性来挂接重排事件监听函数，其原型如下：var reorderListener = function(item,$fromIndex,$toInd

20、ex).ionic在捕捉到用户的重排事件时，将调用此函数，并传入当前的item对象、原 序号及目标序号。collection-repeat : 高性能的ng-repeatcollection-repeat指令和ng-repeat指令类似，但是更适用于大数据量 的列表数据，这是因为，它只将处于可视区域的数据渲染到DOM上：.collection-repeat指令接受一个枚举表达式，同时可以附加以下的属性：item-width - 可选。声明重复元素的宽度item-height - 可选。声明重复元素的高度item-render-buffer - 可选。需要载入渲染缓冲区的可视数据前后的数量。默认

21、为3force-refresh-images - 可选。滚动时是否强制刷新图像。允许值：true | false脚本接口 : $ionicListDelegate如果需要从脚本中控制列表元素，可以使用$ionicListDelegate服务：showReorder(showReorder)- 显示/关闭排序按钮showReorder的允许值为：true | false。可以使用一个作用域上的表达式showDelete(showDelete)- 显示/关闭删除按钮showDelete的允许值为： true | false。可以使用一个作用域上的表达式canSwipeItems(canSwipeI

22、tems)- 是否允许通过滑动方式来显示成员选项按钮canSwipeItems的允许值为：true | false。可以使用一个作用域上的表达式closeOptionButtons()- 关闭所有选项按钮侧边栏菜单 : ion-side-menus侧边栏菜单是一个最多包含三个子容器的元素：默认情况下，侧边栏菜单将只显示ion-side-menu-content容器的内容。向左 滑动时，将显示右边栏ion-side-menu容器的内容，向右滑动时，将显示左边栏 ion-side-menu容器的内容。在ionic中，使用ion-side-menus指令定义侧边栏菜单：.切换指令 : menu-to

23、ggle/menu-closemenu-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

24、。允许值：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属性