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,如果页面未填充满页面高度,会自动检测并无限调用多次加载更多的函数:当然,主要会导致首次调用的时候,会执行几次加载更多的函数: ...
随机推荐
- 从用户浏览器输入url到用户看到页面结果的过程，发生了什么事情？
1.域名解析 域名解析的过程: 1).查询浏览器自身DNS缓存 2).若上面没有查找到,则搜索操作系统自身的dns缓存 3).若上面没有找到,则尝试读取hosts文件 4).若上面没有找到,向本地配 ...
- 剑指offer六之求旋转数组的最小数字
一.题目 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非递减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个 ...
- 记一次TCP重发接口调用的问题
问题描述:基于微软RDP协议,使用开源rdp库与微软skpye软件进行基于tcp的p2p通讯,由于rdp协议传输原始图片数据较大,调用公司内部ice p2p通讯接口处会导致失败. 错误思路:一开始是怀 ...
- 使用Svn的版本号[转载]
1. 生成一个名为autover的项目 注意项目的Properties文件夹下有一个名为AssemblyInfo.cs的文件,autover程序的版本号就写在它里面. 2. 创建模板文件 在Windo ...
- 公共技术点( Java 反射 Reflection)
转载路径:http://p.codekk.com/blogs/detail/5596953ed6459ae7934997c5 本文为 Android 开源项目源码解析 公共技术点中的 Java 反射 ...
- sql查询其他服务器数据库表
exec sp_addlinkedserver 'abc', '', 'SQLOLEDB', '192.168.49.34' exec sp_addlinkedsrvlogin ' go --查询 s ...
- linux上搭建ftp、vsftp, 解决访问ftp超时连接, 解决用户指定访问其根目录,解决ftp主动连接、被动连接的问题
linux上搭建ftp 重要 解决如何搭建ftp 解决用户指定访问其根目录 解决访问ftp超时连接 解决ftp主动连接.被动连接的问题 1.安装ftp ...
- Spring Boot项目的内嵌容器
一.关于容器 刚才开始使用spring boot的开发者会有种很直观的感觉,servlet容器“不见了”.之前开发web项目,都是把程序写完后部署到servlet容器(比如Tomcat),但是使用sp ...
- 最短路径算法----Dijkstra （转）
Dijkstra算法的核心思想是贪心策略+动态规划 算法流程: 在以下说明中,s为源,w[u,v]为点u和v之间的边的长度,结果保存在dis[] 初始化:源的距离dis[s]设为0,其他的点距离设为无 ...
- JSP的九个隐式对象
JSP使用脚本元素作为一种简易方法在模板数据中嵌入java代码,这些脚本元素在JSP翻译成Servlet的阶段,都被转化为Servlet中的java代码. JSP引擎在调用JSP对应的_jspServ ...