ISO中的界面是这样的：

　　　　

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

　　　　

代码如下：

　　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;

             }

         });

     };

 }])

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

　　

 .platform-android .action-sheet-backdrop.active {

   background-color: rgba(0, 0, 0, 0.2); }

 .platform-android .action-sheet {

   margin:; }

   .platform-android .action-sheet .action-sheet-title,

   .platform-android .action-sheet .button {

     text-align: left;

     border-color: transparent;

     font-size: 16px;

     color: inherit; }

   .platform-android .action-sheet .action-sheet-title {

     font-size: 14px;

     padding: 16px;

     color: #666; }

   .platform-android .action-sheet .button.active,

   .platform-android .action-sheet .button.activated {

     background: #e8e8e8; }

 .platform-android .action-sheet-group {

   margin:;

   border-radius:;

   background-color: #fafafa; }

 .platform-android .action-sheet-cancel {

   display: none; }

 .platform-android .action-sheet-has-icons .button {

   padding-left: 56px; }

　　

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

　　　　

 /*.platform-android .action-sheet-backdrop.active {*/

   /*background-color: rgba(0, 0, 0, 0.2); }*/

 /*.platform-android .action-sheet {*/

   /*margin: 0; }*/

   /*.platform-android .action-sheet .action-sheet-title,*/

   /*.platform-android .action-sheet .button {*/

     /*text-align: left;*/

     /*border-color: transparent;*/

     /*font-size: 16px;*/

     /*color: inherit; }*/

   /*.platform-android .action-sheet .action-sheet-title {*/

     /*font-size: 14px;*/

     /*padding: 16px;*/

     /*color: #666; }*/

   /*.platform-android .action-sheet .button.active,*/

   /*.platform-android .action-sheet .button.activated {*/

     /*background: #e8e8e8; }*/

 /*.platform-android .action-sheet-group {*/

   /*margin: 0;*/

   /*border-radius: 0;*/

   /*background-color: #fafafa; }*/

 /*.platform-android .action-sheet-cancel {*/

   /*display: none; }*/

 /*.platform-android .action-sheet-has-icons .button {*/

   /*padding-left: 56px; }*/

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

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

ionic 上拉菜单(ActionSheet)安装和iOS样式不一样的更多相关文章

  1. ionic-Javascript：ionic 上拉菜单(ActionSheet)

    ylbtech-ionic-Javascript:ionic 上拉菜单(ActionSheet) 1.返回顶部 1. ionic 上拉菜单(ActionSheet) 上拉菜单(ActionSheet) ...

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

    闲话不说,先上图: 这是IOS上的显示效果,代码如下: HTML部分: <body ng-app="starter" ng-controller="actionsh ...

  3. Ionic Js一：上拉菜单(ActionSheet)

    上拉菜单(ActionSheet)通过往上弹出的框,来让用户选择选项. 非常危险的选项会以高亮的红色来让人第一时间识别.你可以通过点击取消按钮或者点击空白的地方来让它消失. HTML 代码 <b ...

  4. ionic 上拉加载更多&瀑布流加载&滚动到底部加载更多 主意事项

    首先下拉刷新的代码是这样的,标红的地方为关键代码 <html> <head> <meta charset="utf-8"> <meta n ...

  5. Android 上滑上拉菜单SlidingDrawer 不全屏显示的方法

    这里来说一个已经被废弃的SlidingDrawer.. 他可以实现上拉,下拉的菜单. 但是有个问题就是上拉以后,是全屏显示的. 首先 写一个布局: <RelativeLayout xmlns:a ...

  6. ionic上拉加载组件 ion-infinite-scroll自动调用多次的问题

    参考文章地址:http://www.cnblogs.com/luleixia/p/6402418.html ionic 一个上拉刷新的组件 ion-infinite-scroll,如果页面未填充满页面 ...

  7. 160823、ionic上拉/下拉更新数据

    <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF- ...

  8. 解决ionic 上拉加载组件 ion-infinite-scroll自动调用多次的问题或禁止第一次加载

    ionic 中一个上拉刷新的组件 ion-infinite-scroll,如果页面未填充满页面高度,会自动检测并无限调用多次加载更多的函数: 当然,主要会导致首次调用的时候,会执行几次加载更多的函数: ...

  9. 解决ionic 上拉加载组件 ion-infinite-scroll自动调用多次的问题

    ionic 中一个上拉刷新的组件 ion-infinite-scroll,如果页面未填充满页面高度,会自动检测并无限调用多次加载更多的函数:当然,主要会导致首次调用的时候,会执行几次加载更多的函数: ...

随机推荐

  1. asp.net core中遇到需要自定义数据包解密方法的时候

    最近将公司的项目用.netcore重写, 服务的http外部接口部分收发消息是DES加解密的, 那么在asp.net core mvc的action处理之前需要加入解密这个步骤. 我第一想到的是用fi ...

  2. Metasploit数据库问题汇总

    数据库在metaspoit中是相当重要的,当做一个大型渗透测试项目的时候,收集到的信息是相当大的,当和你的同伴一起协同作战的时候,你们可能 在不同的地方,所以数据共享很重要了!而且Metasploit ...

  3. 平衡二叉树-AVL树(LL、RR、LR、RL旋转)

    平衡二叉树的定义: 任意的左右子树高度差的绝对值不超过1,将这样的二叉树称为平衡二叉树,二叉平衡树前提是一个二叉排序树. 平衡二叉树的插入: 二叉平衡树在插入或删除一个结点时,先检查该操作是否导致了树 ...

  4. （转）如何入门 Python 爬虫

    “入门”是良好的动机,但是可能作用缓慢.如果你手里或者脑子里有一个项目,那么实践起来你会被目标驱动,而不会像学习模块一样慢慢学习. 另外如果说知识体系里的每一个知识点是图里的点,依赖关系是边的话,那么 ...

  5. CentOS7下搭建FastDfs（V5.11）+Keepalived分布式集群部署

    FastDfs介绍 http://kb.cnblogs.com/page/82280/ 1.准备 系统 CentOS7 最小化安装. #VIP虚拟IP 10.1.6.218 #Keepalived 1 ...

  6. spring@Transactional注解事务不回滚不起作用无效的问题处理

    这几天在项目里面发现我使用@Transactional注解事务之后,抛了异常居然不回滚.后来终于找到了原因. 如果你也出现了这种情况,可以从下面开始排查. 一.特性先来了解一下@Transaction ...

  7. 工具-CrashMonkey4IOS，Monkey测试方案

    在TesterHome看到了CrashMonkey4IOS,顿时觉得之前用instrument在做monkey测试,非常的弱智!crash后啥都看不到,无crashlog,无crash步骤,并且也不能 ...

  8. [java初探05]__数组的简单认识及Arrays类的常用方法

    数组是具有相同数据类型的一组数据的集合.在程序设计中,这样的集合称之为数组.数组的每个元素都具有相同的数据类型,在Java中数组也被看为一个对象. 在里,了解了数组的定义之后, 我们知道了,数组并不是 ...

  9. spring scope 作用域

    转自:http://www.cnblogs.com/qq78292959/p/3716827.html 今天研究了一下scope的作用域.默认是单例模式,即scope="singleton& ...

  10. [转]【mysql监控】查看mysql库大小，表大小，索引大小

    本文转自:http://blog.sina.com.cn/s/blog_4c197d420101fbl9.html 查看所有库的大小 mysql> use information_schema; ...