《ionic+angularjs学习笔记剖析》由会员分享，可在线阅读，更多相关《ionic+angularjs学习笔记剖析（28页珍藏版）》请在金锄头文库上搜索。
1、属性：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/center/right”; 标题显示位置(顶
2、部)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” 内容可以滚动的方向。允许值：x|y|xy。默认为
3、 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
4、-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(ezCtr
5、l, 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）增加 滚动刷新功能：属性：on-infinite -
6、必须。当滚动到底部时执行此表达式* distance - 可选。距底部距离百分比。当距离底部超过此数值时,执行on-infinite。默认为1%icon - 可选。载入时显示的图标。默认是ion-load-d。ionic推荐使用spinner代替icon属性spinner - 可选。载入时的spinner。默认是ionSpinnerimmediate-check - 可选。是否在载入时立即检查滚动框范围例子：itemJs文件angular.module(ezApp,ionic).controller(ezCtrl,function($scope,$timeout)$scope.items =
7、;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）。 $ionicScrollDelegate服务提供的常用方法如下：resize()重新计算容器尺寸。当父
8、元素大小变化时，应当调用此方法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偏移量getScro
9、llPosition()读取当前视图位置。返回值为一个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设置的颜色tab 1 contention-tabs : 声明条带风格如果学
10、习过课程：ionic之CSS框架，应该记得使用.tabs-striped样式可以将选项卡 声明为条带风格：.也可以通过$ionicConfigProvider在AngularJS的配置阶段，将选项卡设置为条带风格：app.config(function($ionicConfigProvider) $ionicConfigProvider.tabs.style(striped); / 参数可以是： standard | striped)ion-tabs : 声明位置如果学习过课程：ionic之CSS框架，应该记得使用.tabs-top可以将选项卡置于 顶部标题栏之下：.也可以通过$ionicCo
11、nfigProvider，在配置阶段设置选项卡的位置是在顶部还是底部：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属性的值绘制图标
