ionic 学习之 上拉菜单、背景层、下拉列表
简介
这一篇是我开始学习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 |
禁止下拉图标旋转动画 |
