闲话不说，先上图：

这是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. 测试一下StringBuffer和StringBuilder及字面常量拼接三种字符串的效率

    之前一篇里写过字符串常用类的三种方式<java中的字符串相关知识整理>,只不过这个只是分析并不知道他们之间会有多大的区别,或者所谓的StringBuffer能提升多少拼接效率呢?为此写个简 ...

  2. HTML5 介绍

    本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...

  3. 【C#公共帮助类】 ToolsHelper帮助类

    这个帮助类,目前我们只用到了两个,我就先更新这两个,后面有用到的,我会继续更新这个Helper帮助类 在Tools.cs中 有很多方法 跟Utils里是重复的,而且Utils里的方法更加新一点,大家可 ...

  4. MFC中成员变量的声明顺序与析构顺序

    第一次用博客,第一篇随笔,就写今天遇到的一个问题吧. 在VS2008的MFC对话框程序,窗口成员变量的声明顺序与其析构顺序相反,即,先声明的变量后析构,后声明的变量先析构.未在其他模式下测试. cla ...

  5. 基于NPOI的Excel数据导入

    从Excel导入数据最令人头疼的是数据格式的兼容性,特别是日期类型的兼容性.为了能够无脑导入日期,折腾了一天的NPOI.在经过测试确实可以导入任意格式的合法日期后,写下这篇小文,与大家共享.完整代码请 ...

  6. ABAP单元测试最佳实践

    本文包含了我在开发项目中经历过的实用的ABAP单元测试指导方针.我把它们安排成为问答的风格,欢迎任何人添加更多的Q&A's,以完成这个列表. 在我的项目中,只使用传统的ABAP report. ...

  7. Oracle 表空间和用户权限管理

    一. 表空间 Oracle数据库包含逻辑结构和物理结构. 数据库的物理结构指的是构成数据库的一组操作系统文件. 数据库的逻辑结构是指描述数据组织方式的一组逻辑概念以及它们之间的关系. 表空间是数据库逻 ...

  8. SqlServer简单数据分页

    手边开发的后端项目一直以来都用的.NET MVC框架,访问数据库使用其自带的EF CodeFirst模式,写存储过程的能力都快退化了 闲来无事,自己写了条分页存储过程,网上类似的文章多的是,这里只列了 ...

  9. 跨域问题，前端主动向后台发送cookie

    跨域是什么? 从一个域名的网页访问另一个域名的资源,就会出现跨域.只要协议.端口.域名有一个不同就会出现跨域 例如: 1.协议不同  http://www.baidu.com:80 和 https:/ ...

  10. D3.js学习（六）

    上节我们学习了如何绘制多条曲线, 以及给不同的曲线指定不同的坐标系.在这节当中,我们会对坐标轴标签相关的处理进行学习.首先,我们来想一个问题, 如何我们的x轴上的各个标签的距离比较近,但是标签名又比较 ...