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. 【原创】Dependency Walker

    https://zh.wikipedia.org/wiki/Dependency_Walker For situations where the system says it can’t find s ...

  2. shell 终端terminfo命令 tput

    tput命令 tput 可以更改终端功能,如移动或更改光标,更改文本属性,清除终端屏幕的特定区域等. 光标属性 在shell脚本或命令行中,可以利用tput命令改变光标属性. tput clear # ...

  3. Python：使用异常处理来判断运行的平台

    try: import termios, TERMIOS 1 except ImportError: try: import msvcrt 2 except ImportError: try: fro ...

  4. linux下的进程(孤儿进程、僵尸进程)

    linux提供了一种机制可以保证只要父进程想知道子进程结束时的状态信息,就可以得到.这种机制就是:在每个进程退出的时候,内核释放该进程所有的资源,包括打开文件,占用的内存等.但是仍然为其保留一定的信息 ...

  5. ASP.NET Core 中使用 GrayLog 记录日志

    使用 UDP 协议发送日志 自定义好的查询 key 存储数据,尽量不要使用 graylog2-server 服务端格式化日志再存储 Ubuntu 安装服务端 sudo apt-get update & ...

  6. Java 中的队列 Queue

    一.队列的定义 我们都知道队列(Queue)是一种先进先出(FIFO)的数据结构,Java中定义了java.util.Queue接口用来表示队列.Java中的Queue与List.Set属于同一个级别 ...

  7. Linux 启动过程详解

    目录 1. Linux启动过程 2. 启动过程概述 3. 引导加载阶段 4. 内核阶段 4.1 内核加载阶段 4.2 内核启动阶段 5. 早期的用户空间 6. 初始化过程 6.1 SysV init ...

  8. postgresql 创建用户并创建数据库

    首先通过 sudo -i -u postgres 以管理员身份 postgres 登陆,然后通过 createuser --interactive (-- interactive 是交互式,创建过程可 ...

  9. AI---训练集(train set) 验证集(validation set) 测试集(test set)

    在有监督(supervise)的机器学习中,数据集常被分成2~3个即: 训练集(train set) 验证集(validation set) 测试集(test set) 一般需要将样本分成独立的三部分 ...

  10. 并发编程之 Thread 类过期方法和常用方法

    前言 在 Java 刚诞生时,Thread 类就已经有了很多方法,但这些方法由于一些原因(有一些明显的bug或者设计不合理)有些已经废弃了,但是他们的方法名却是非常的好,真的是浪费.我们在进行并发必编 ...