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. Python多线程、多进程实现

    劝君莫惜金缕衣,劝君惜取少年时.花开堪折直须折,莫待无花空折枝. 内容摘要: paramiko模块 进程.与线程区别 python GIL全局解释器锁 多线程    语法    join    线程锁 ...

  2. PostgreSQL查询优化简介

    简介 PostgreSQL查询优化器执行过程 语法分析:生成查询树 语义检查:对SQL表达的语义进行检查 查询优化 视图重写 逻辑优化:子查询优化,条件化简,等价谓词重写,连接消除,得到逻辑计划 物理 ...

  3. 【详解】JNI (Java Native Interface) （二）

    案例二:传递参数给C代码,并从其获取结果 注:这里传递的参数是基本类型的参数,在C代码中有直接的映射类型. 此案例所有生成的所有文件如下: (1)编写案例二的Java代码,如下: 这里我们定义了一个n ...

  4. ASP.NET MVC5+EF6+LayUI实战教程，通用后台管理系统框架（5）- 创建项目结构

    前言 关于理论知识,我的表达能力有限,知识水平有限,就不过多的讲解编程工作中的专用术语了,大家写的代码多了,自然就懂了 前几节课,我们看到了后台的主页面,以及一个自认为比较漂亮的登录界面,算是编程套路 ...

  5. CodeForces -977F(突破定式思维+map应用)

    题目链接: https://cn.vjudge.net/problem/CodeForces-977F /* 问题 输入n和n个数的数列 计算并输出最长增量为1的上升子序列 解题思路 用n2的最长上升 ...

  6. UVA 1605 Building for UN(思维)

    题目链接: https://cn.vjudge.net/problem/UVA-1605#author=0 /* 问题 设计一个包含若干层的联合国大厦,其中每一层都是等大的网格,每个格子分配给一个国家 ...

  7. [SPOJ 687]Repeats

    Description 题库链接 给出一个长度为 \(n\) 的字符串,求重复次数最多的连续重复子串. \(1\leq n\leq 50000\) Solution Code #include < ...

  8. Spring源码分析：非懒加载的单例Bean初始化过程（下）

    上文Spring源码分析:非懒加载的单例Bean初始化过程(上),分析了单例的Bean初始化流程,并跟踪代码进入了主流程,看到了Bean是如何被实例化出来的.先贴一下AbstractAutowireC ...

  9. 3.C#知识点：is和as

    IS和AS 都是用于类型转换的操作. 但是这两个有什么区别呢? 简单的来说 is 判断成立则返回True,反之返回false.as 成立则返回要转换的对象,不成立则返回Null. 下面掏一手代码来说明 ...

  10. oracle中数据类型number(m,n)

    oracle中数据类型number(m,n)中m表示的是所有有效数字的位数,n表示的是小数位的位数.m的范围是1-38,即最大38位. 1> .NUMBER类型细讲:Oracle   numbe ...