ionic 上拉菜单(ActionSheet)安装和iOS样式不一样

　　ISO中的界面是这样的：

然而，Android中的界面是这样的：

代码如下：

　　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 }])

　　主要修改 ionic.css 的代码就行了，对比iOS和Android的ionic.css样式后发现，Android多了这段样式代码：

 1 .platform-android .action-sheet-backdrop.active {
 2   background-color: rgba(0, 0, 0, 0.2); }
 3 
 4 .platform-android .action-sheet {
 5   margin: 0; }
 6   .platform-android .action-sheet .action-sheet-title,
 7   .platform-android .action-sheet .button {
 8     text-align: left;
 9     border-color: transparent;
10     font-size: 16px;
11     color: inherit; }
12   .platform-android .action-sheet .action-sheet-title {
13     font-size: 14px;
14     padding: 16px;
15     color: #666; }
16   .platform-android .action-sheet .button.active,
17   .platform-android .action-sheet .button.activated {
18     background: #e8e8e8; }
19 
20 .platform-android .action-sheet-group {
21   margin: 0;
22   border-radius: 0;
23   background-color: #fafafa; }
24 
25 .platform-android .action-sheet-cancel {
26   display: none; }
27 
28 .platform-android .action-sheet-has-icons .button {
29   padding-left: 56px; }

　　正是这段样式代码导致了两个平台显示的界面不一样，知道原因后，接下来就很简单了，把这段代码注释掉就行了

 1 /*.platform-android .action-sheet-backdrop.active {*/
 2   /*background-color: rgba(0, 0, 0, 0.2); }*/
 3 
 4 /*.platform-android .action-sheet {*/
 5   /*margin: 0; }*/
 6   /*.platform-android .action-sheet .action-sheet-title,*/
 7   /*.platform-android .action-sheet .button {*/
 8     /*text-align: left;*/
 9     /*border-color: transparent;*/
10     /*font-size: 16px;*/
11     /*color: inherit; }*/
12   /*.platform-android .action-sheet .action-sheet-title {*/
13     /*font-size: 14px;*/
14     /*padding: 16px;*/
15     /*color: #666; }*/
16   /*.platform-android .action-sheet .button.active,*/
17   /*.platform-android .action-sheet .button.activated {*/
18     /*background: #e8e8e8; }*/
19 
20 /*.platform-android .action-sheet-group {*/
21   /*margin: 0;*/
22   /*border-radius: 0;*/
23   /*background-color: #fafafa; }*/
24 
25 /*.platform-android .action-sheet-cancel {*/
26   /*display: none; }*/
27 
28 /*.platform-android .action-sheet-has-icons .button {*/
29   /*padding-left: 56px; }*/

　　　打包之后就可以发现，跟iOS显示的界面是一样的了。

感谢这篇文章：http://www.cnblogs.com/provencefeng/p/6186851.html