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. 剑指offer十之矩形覆盖

    一.题目 我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形.请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? 二.解答思路 如果第一步选择竖方向填充,则剩下的填充规模缩小 ...

  2. jenkins 通过shell启动tomcat会随着job完成而被自动关闭的解决方法

    jenkins 通过shell启动tomcat会随着job完成而被自动关闭的解决方法 填入BUILD_ID=随便填什么 原理是:我不知道

  3. CentOS 7.5 安装与配置 Percona Server 5.7

    个人比较喜欢 MYSQL 的轻量,今天花了一点时间把阿里云上的 MYSQL5.7 换成了 Percona-Server .Percona 是一个开源的 MySQL 衍生版,TokuDB 的数据库引擎使 ...

  4. C#基础篇九OOP属性结构枚举

    1.设计一个Ticket类,有一个距离属性(本属性只读,在构造方法中赋值),不能为负数,有一个价格属性,价格属性只读,并且根据距离计算价格(1元/公里):-----------0-100公里 票价不打 ...

  5. mysql命令行查看建表语句

    命令如下: SHOW CREATE TABLE tbl_name 例子: mysql> SHOW CREATE TABLE t\G . row ************************* ...

  6. Python中bisect的使用

    在<Think Python>中第十章的练习中,涉及到了分半查找的bisect模块.为此,在网上查阅了Python中bisect模块的相关内容.有几个链接相对权威和明白: 1> ht ...

  7. Spring 环境与profile(一)——超简用例

    什么是profile,为什么需要profile? 在开发时,不同环境(开发.联调.预发.正式等)所需的配置不同导致,如果每改变一个环境就更改配置不但麻烦(修改代码.重新构建)而且容易出错.Spring ...

  8. Netty 核心组件 Pipeline 源码分析（一）之剖析 pipeline 三巨头

    目录大纲: 前言 ChannelPipeline | ChannelHandler | ChannelHandlerContext 三巨头介绍 三巨头编织过程(创建过程) ChannelPipelin ...

  9. Nodejs编写复制文件及文件夹命令

    github地址 use npm i fuzhi -g 复制文件 fuzhi a.js b.js 复制文件夹 fuzhi dirA dirB Wiki 创建一个node命令的两个关键点 1.在pack ...

  10. [转]SQL Collation冲突解决 临时表

    本文转自:http://ju.outofmemory.cn/entry/191163 问题描述 在SQL Server中使用一些复杂的存储过程时,我们需要借用临时表来完成一些逻辑的处理,例如:数据的临 ...