ionic第二坑——ionic 上拉菜单(ActionSheet)安卓样式坑

闲话不说，先上图：

这是IOS上的显示效果，代码如下：

HTML部分：

 <body ng-app="starter" ng-controller="actionsheetCtl" >
     <ion-pane>
         <ion-content >
             <h2 ng-click="show()">Action Sheet</h2>
         </ion-content>
     </ion-pane>
 </body>

JS部分：

 angular.module('starter', ['ionic'])

 .run(function($ionicPlatform) {
   $ionicPlatform.ready(function() {
     // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
     // for form inputs)
     if(window.cordova && window.cordova.plugins.Keyboard) {
       cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
     }
     if(window.StatusBar) {
       StatusBar.styleDefault();
     }
   });
 })

 .controller( 'actionsheetCtl',['$scope','$ionicActionSheet','$timeout' ,function($scope,$ionicActionSheet,$timeout){
     $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() {
                  // add cancel code..
                },
             buttonClicked: function(index) {
               return true;
             }
         });
     };
 }])

可是，当把以上代码写进项目后，安卓上打包后却不是如此，如下图：

就变成了这个鬼样子。。。什么原因呢？于是查看样式，对比后发现，android平台应用这段代码时候，会多出一段样式：

原来，就是这部分样式导致了不正常的菜单出现。不知道框架为什么做如此处理，但于我们而言这样明显是不行的，于是乎修改ionic.css，如下：

把这段css代码注释掉就可以了，目前还没有其他影响。