闲话不说,先上图:
这是IOS上的显示效果,代码如下:
HTML部分:
1 <body ng-app="starter" ng-controller="actionsheetCtl" >
2 <ion-pane>
3 <ion-content >
4 <h2 ng-click="show()">Action Sheet</h2>
5 </ion-content>
6 </ion-pane>
7 </body>
JS部分:
1 angular.module('starter', ['ionic'])
2
3 .run(function($ionicPlatform) {
4 $ionicPlatform.ready(function() {
5 // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
6 // for form inputs)
7 if(window.cordova && window.cordova.plugins.Keyboard) {
8 cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
9 }
10 if(window.StatusBar) {
11 StatusBar.styleDefault();
12 }
13 });
14 })
15
16 .controller( 'actionsheetCtl',['$scope','$ionicActionSheet','$timeout' ,function($scope,$ionicActionSheet,$timeout){
17 $scope.show = function() {
18 var hideSheet = $ionicActionSheet.show({
19 buttons: [
20 { text: '<b>Share</b> This' },
21 { text: 'Move' }
22 ],
23 destructiveText: 'Delete',
24 titleText: 'Modify your album',
25 cancelText: 'Cancel',
26 cancel: function() {
27 // add cancel code..
28 },
29 buttonClicked: function(index) {
30 return true;
31 }
32 });
33 };
34 }])
可是,当把以上代码写进项目后,安卓上打包后却不是如此,如下图:
就变成了这个鬼样子。。。什么原因呢?于是查看样式,对比后发现,android平台应用这段代码时候,会多出一段样式:
原来,就是这部分样式导致了不正常的菜单出现。不知道框架为什么做如此处理,但于我们而言这样明显是不行的,于是乎修改ionic.css,如下:
把这段css代码注释掉就可以了,目前还没有其他影响。