闲话不说，先上图：

这是IOS上的显示效果，代码如下：

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;

             }

         });

     };

 }])

可是，当把以上代码写进项目后，安卓上打包后却不是如此，如下图：

就变成了这个鬼样子。。。什么原因呢？于是查看样式，对比后发现，android平台应用这段代码时候，会多出一段样式：

原来，就是这部分样式导致了不正常的菜单出现。不知道框架为什么做如此处理，但于我们而言这样明显是不行的，于是乎修改ionic.css，如下：

把这段css代码注释掉就可以了，目前还没有其他影响。

ionic第二坑——ionic 上拉菜单(ActionSheet)安卓样式坑的更多相关文章

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

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

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

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

  3. ionic 上拉菜单(ActionSheet)安装和iOS样式不一样

    ISO中的界面是这样的: 然而,Android中的界面是这样的: 代码如下: HTML部分: <body ng-app="starter" ng-controller=&qu ...

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

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

  5. vue loadMore 上拉刷新不能实现的坑

    1.如果你写的代码没问题,但依然不能实现上拉刷新效果,那你有可能是缺少了overflow: scroll 2.如果上拉刷新一直在加载状态,需要调用this.$refs.loadmore.onBotto ...

  6. ionic的actionsheet安卓样式不正常的坑及解决之道

    这是actionsheet该有的样子,可是android下变成了这样: 百度后,发现修改lonic.css,注释这段代码就可以了:

  7. jq实现鼠标经过出现上拉菜单

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. iOS 程序进入后台，包含用户上拉快捷菜单导致程序失去活跃的研究

    今日在使用某App时候,突然发现上拉菜单.程序视频扔在播放,咦!引起了我的兴趣. 首先,列出两个方法, 第一个方法是AppDelegate的代理.当程序进入后台时候调用 - (void)applica ...

  9. Bootstrap<基础十四> 按钮下拉菜单

    使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...

随机推荐

  1. 【原创分享·微信支付】C# MVC 微信支付教程系列之现金红包

            微信支付教程系列之现金红包           最近最弄这个微信支付的功能,然后扫码.公众号支付,这些都做了,闲着无聊,就看了看微信支付的其他功能,发现还有一个叫“现金红包”的玩意,想 ...

  2. C#日志

    参考页面: http://www.yuanjiaocheng.net/Entity/first.html http://www.yuanjiaocheng.net/Entity/jieshao.htm ...

  3. [数据结构]——二叉树（Binary Tree）、二叉搜索树（Binary Search Tree）及其衍生算法

    二叉树(Binary Tree)是最简单的树形数据结构,然而却十分精妙.其衍生出各种算法,以致于占据了数据结构的半壁江山.STL中大名顶顶的关联容器--集合(set).映射(map)便是使用二叉树实现 ...

  4. Struts2入门(六)——国际化

    一.前言 1.1.国际化简介 国际化是指应用程序在运行的时候,根据客户端请求来自的国家地区.语言的不同而显示不同的界面(简单说就是根据你的地区显示相关地区的语言,如果你现在在英国,那么显示的语言就是英 ...

  5. angular2之前端篇—1（node服务器分支）

    上一篇.net core和angular2之前端篇-1 使用的是dotnet模板.之所以用它,因为想用他写webapi,但是写道下一篇的时候遇到点问题,所以先写个分支测试一下.这次是用Node作为服务 ...

  6. Mysql 学习之基础操作

    一.表复制 1.复制表结构    将表hello的结构复制一份为表hello3 2.复制数据 a.如果两张表的结构一样且你要复制所有列的数据 mysql> insert into hello3 ...

  7. MongoDB学习笔记三—增删改文档上

    插入insert 单条插入 > db.foo.insert({"bar":"baz"}) WriteResult({ }) 批量插入 > db.fo ...

  8. 跟着老男孩教育学Python开发【第四篇】：模块

    双层装饰器示例 __author__ = 'Golden' #!/usr/bin/env python # -*- coding:utf-8 -*-   USER_INFO = {}   def ch ...

  9. 两个变量交换的四种方法（Java）

    对于两种变量的交换,我发现四种方法,下面我用Java来演示一下. 1.利用第三个变量交换数值,简单的方法. (代码演示一下) class TestEV //创建一个类 { public static ...

  10. Matrix4x4矩阵变换、欧拉角转四元数、角度转弧度

    Matrix4x4 // 重置矩阵 ][]) { m[][] = ; m[][] = ; m[][] = ; m[][] = ; m[][] = ; m[][] = ; m[][] = ; m[][] ...