ionic 上拉菜单(ActionSheet)安装和iOS样式不一样
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样式不一样的更多相关文章
- ionic-Javascript：ionic 上拉菜单(ActionSheet)
ylbtech-ionic-Javascript:ionic 上拉菜单(ActionSheet) 1.返回顶部 1. ionic 上拉菜单(ActionSheet) 上拉菜单(ActionSheet) ...
- ionic第二坑——ionic 上拉菜单(ActionSheet)安卓样式坑
闲话不说,先上图: 这是IOS上的显示效果,代码如下: HTML部分: <body ng-app="starter" ng-controller="actionsh ...
- Ionic Js一：上拉菜单(ActionSheet)
上拉菜单(ActionSheet)通过往上弹出的框,来让用户选择选项. 非常危险的选项会以高亮的红色来让人第一时间识别.你可以通过点击取消按钮或者点击空白的地方来让它消失. HTML 代码 <b ...
- ionic 上拉加载更多&瀑布流加载&滚动到底部加载更多 主意事项
首先下拉刷新的代码是这样的,标红的地方为关键代码 <html> <head> <meta charset="utf-8"> <meta n ...
- Android 上滑上拉菜单SlidingDrawer 不全屏显示的方法
这里来说一个已经被废弃的SlidingDrawer.. 他可以实现上拉,下拉的菜单. 但是有个问题就是上拉以后,是全屏显示的. 首先 写一个布局: <RelativeLayout xmlns:a ...
- ionic上拉加载组件 ion-infinite-scroll自动调用多次的问题
参考文章地址:http://www.cnblogs.com/luleixia/p/6402418.html ionic 一个上拉刷新的组件 ion-infinite-scroll,如果页面未填充满页面 ...
- 160823、ionic上拉/下拉更新数据
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF- ...
- 解决ionic 上拉加载组件 ion-infinite-scroll自动调用多次的问题或禁止第一次加载
ionic 中一个上拉刷新的组件 ion-infinite-scroll,如果页面未填充满页面高度,会自动检测并无限调用多次加载更多的函数: 当然,主要会导致首次调用的时候,会执行几次加载更多的函数: ...
- 解决ionic 上拉加载组件 ion-infinite-scroll自动调用多次的问题
ionic 中一个上拉刷新的组件 ion-infinite-scroll,如果页面未填充满页面高度,会自动检测并无限调用多次加载更多的函数:当然,主要会导致首次调用的时候,会执行几次加载更多的函数: ...
随机推荐
- python2和3的区别 高清大图：）
点击图片,新标签中打开查看!或右键‘图片另存为’!
- 剑指offer十五之反转链表
一.题目 输入一个链表,反转链表后,输出链表的所有元素. 二.思路 详细分析见代码注释 三.代码 public class Solution { public ListNode Reverse ...
- (转)关于python3中staticmethod(静态方法)classmethod(类方法)实例方法的联系和区别
原文:http://dmcoders.com/2017/08/30/pythonclass/ https://zhuanlan.zhihu.com/p/28010894------正确理解Python ...
- (转)explain、db2exfmt 命令的使用：文本输出执行计划
原文:http://blog.51cto.com/freebile/1068610 db2有图形执行计划显示工具,如果没有图形环境,如unix主机,可以生成文本的文件来显示执行计划1.如果第一次执行, ...
- 面试基础知识集合(python、计算机网络、操作系统、数据结构、数据库等杂记)
python python _.__.__xx__之间的差别 python中range.xrange和randrange的区别 python中 =.copy.deepcopy的差别 python 继承 ...
- 《第一本Docker书》
Docker简介 Docker依赖写时复制(copy-on-write),使修改应用程序非常迅速. Docker推荐单个容器只运行一个应用或进程,鼓励面向服务的架构和微服务架构. Docker的核心组 ...
- JAVA多线程Thread VS Runnable详解
要求 必备知识 本文要求基本了解JAVA编程知识. 开发环境 windows 7/EditPlus 演示地址 源文件 进程与线程 进程是程序在处理机中的一次运行.一个进程既包括其所要执行的指令,也 ...
- 深入了解preventDefault与stopPropagation
event.preventDefault()用法介绍(阻止默认事件) 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "subm ...
- [Python 从入门到放弃] 3. BIF(内建函数)
BIF (built-in functions) Python中提供了70多个内建函数,具备大量的现成功能. BIF不需要专门导入,可以直接使用,拿来就用 1.print() # 在屏幕上打印输出 如 ...
- C++关于vector、queue、stack、priority_queue的元素访问
vector.queue.stack.priority_queue对元素进行元素访问时,返回的是对应元素的引用.