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

闲话不说，先上图：

这是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代码注释掉就可以了，目前还没有其他影响。

 

posted on 2016-12-16 14:50  螃蟹家  阅读(3355)  评论(2)  编辑  收藏  举报

导航