ionic其次坑——ionic 上拉菜單(ActionSheet)安卓樣式坑

編輯：Android開發教程

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代碼注釋掉就可以了，目前還沒有其他影響。

上一頁:Android app性能測試總結（繼續更新中）
下一頁:React Native Android gradle下載慢有關問題解決

Android開發教程