简介
这一篇是我开始学习ionic JavaScript 部分的第一篇，所以已经做好了踩坑的准备，而且可能会遇到很多不懂的地方，所以随手注释，笔记会凌乱些。而且此前没有学angularjs，所以也会补充些该方面的知识点
上拉菜单
上拉菜单(ActionSheet)通过往上弹出的框，来让用户选择选项。你可以通过点击取消按钮或者点击空白的地方来让它消失。
兴冲冲地CV代码，开始学习，结果出现的是这个鬼样子，颜色和按钮都没得了
百度了一下解决方法，把下图中那段样式注释掉就可以了
解决方法
正常界面是酱紫的
好了，贴一下程序
<script type="text/javascript">
angular.module('test', ['ionic'])//我们使用angular.module()方法来声明模块，这个方法能够接受两个参数//第一个是模块的名称，第二个是依赖列表，也就是可以被注入到模块中的对象列表//angular.module('myApp', [])后面的数组可以添加需要依赖的其他module//ng-controller 指令用于为你的应用添加控制器。//在控制器中，你可以编写代码，制作函数和变量，并使用 scope 对象来访问。
.controller( 'actionsheetCtl',['$scope','$ionicActionSheet','$timeout' ,function($scope,$ionicActionSheet,$timeout){//$scope 并不处理和操作数据，在视图和控制器之间建立了一个通道
$scope.show = function() {// 上拉菜单内容显示，及布局
var hideSheet = $ionicActionSheet.show({
buttons: [
{ text: '<b>Share</b> This' },
{ text: 'Move' }
],
destructiveText: 'Delete',
titleText: 'Modify your album',
cancelText: 'Cancel',
cancel: function() { // 此处添加取消代码
},
buttonClicked: function(index) { return true;
}
});//定时函数
$timeout(function() {
hideSheet();
}, 2000);
};
}]) </script></head><body ng-app="test" ng-controller="actionsheetCtl" >ng-app="myApp" 来说明app需要从哪个module启动<ion-pane> 简单的容器 <ion-content > 滚动效果，用于上拉或下拉 <h2 ng-click="show()">Action Sheet</h2>
</ion-content></ion-pane></body>注释
angular.module()方法
AngularJS允许我们使用angular.module()方法来声明模块，这个方法能够接受两个参数，第一个是模块的名称，第二个是依赖列表，也就是可以被注入到模块中的对象列表。angular.module('myApp', []);
这个方法相当于AngularJS模块的setter方法，是用来定义模块的。
调用这个方法时如果只传递一个参数，就可以用它来引用模块。例如，可以通过以下代码来引用myApp模块：
// 这个方法用于获取应用angular.module('myApp')这个方法相当于AngularJS模块的getter方法，用来获取对模块的引用。
接下来，就可以在angular.module('myApp')返回的对象上创建我们的应用了。
ng-click
ng-click指令告诉了 AngularJS HTML 元素被点击后需要执行的操作。
<ion-content >
一个有滚动效果的区域，用于上拉或下拉。
如果ion-content中存在动态内容，需在添加内容后调用$ionicScrollDelegate.resize()重新解析容器尺寸。
ng-controller
ng-controller 指令用于为你的应用添加控制器。
在控制器中，你可以编写代码，制作函数和变量，并使用 scope 对象来访问其中的方法或属性。
背景层
在组件中可以使用$ionicBackdrop.retain()来显示背景层，使用$ionicBackdrop.release()隐藏背景层。
每次调用retain后，背景会一直显示，直到调用release消除背景层。注释部分参考上面的，此处不作重复。看个例子
<script type="text/javascript">
angular.module('test', ['ionic'])
.controller( 'actionsheetCtl',['$scope','$timeout' ,'$ionicBackdrop',function($scope,$timeout,$ionicBackdrop){
$scope.action = function() {
$ionicBackdrop.retain();// retain 调用显示背景层
$timeout(function() { //默认让它1秒后消失//此处写的是定时函数，当然也可以另写一个取消函数
$ionicBackdrop.release(); // release消除背景层
}, 1000);
};
}]) </script></head><body ng-app="test" ng-controller="actionsheetCtl" ><ion-pane>
<ion-content >
<h2 ng-click="action()">$ionicBackdrop</h2>
</ion-content></ion-pane></body>效果图没什么好看的，不截图了
下拉刷新
添加一个下拉刷新的滚动视图。
需将它作为ionContent的第一个子元素。其中$scope.$broadcast("scroll.refreshComplete");这个的作用是请求到数据刷新页面。
ng-bind 指令告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML 元素的内容。类似于变量名。
ng-repeat 指令用于循环输出指定次数的 HTML 元素。集合必须是数组或对象。
<script type="text/javascript">
angular.module('test', ['ionic'])
.controller( 'actionsheetCtl',['$scope','$timeout' ,'$http',function($scope,$timeout,$http){
$scope.items=[
{ "name":"HTML5"
},
{ "name":"JavaScript"
},
{ "name":"Css3"
}
];
$scope.doRefresh = function() {
$http.get('main.json') // 内容写成和items一样的格式
.success(function(newItems) {
$scope.items = newItems;
})
.finally(function() {
$scope.$broadcast('scroll.refreshComplete');
});
};
}]) </script></head><body ng-app="test" ng-controller="actionsheetCtl" ><ion-pane>
<ion-content >
<ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>
<ion-list>
<ion-item ng-repeat="item in items" ng-bind="item.name"></ion-item>
</ion-list>
</ion-content></ion-pane></body>一些类似的API
| 属性 | 类型 | 说明 |
|---|---|---|
| on-refresh | expression | 下拉并刷新后触发 |
| on-pulling | expression | 下拉时触发 |
| pulling-text | string | 下拉时显示的文字 |
| pulling-icon | string | 下拉时显示的图标,默认: 'ion-arrow-down-c'. |
| spinner | string | 同refreshing-icon,但spinner基于SVG动画 |
| refreshing-icon | string | 当用户下拉并松开后,显示等待的图标 |
| disable-pulling-rotation | boolean | 禁止下拉图标旋转动画 |
作者：邪人君子
链接：https://www.jianshu.com/p/e90a15a51b3a
共同学习，写下你的评论
评论加载中...
作者其他优质文章
