设为首页 加入收藏

TOP

ionic第二坑——ionic 上拉菜单(ActionSheet)安卓样式坑
2017-10-11 15:25:25 】 浏览:7744
Tags: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代码注释掉就可以了,目前还没有其他影响。

 

】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇ionic第一坑——ion-slide-box坑.. 下一篇BroadCastRecieve

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目