ionicframework中android和ios在默认样式上有一些不同的地方,官方文档中都有说明,但是经常会想不起。

一、差异:

1.tab位置,$ionicConfigProvider, tabs.position(value)

Android 默认是顶部(top),Ios是底部 (bottom)

2.标题android默认靠左边,ios默认居中

navBar.alignTitle(value)

二:解决方案:

1.将Android的tab默认设置是底部显示:

修改app.js文件如下:

.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {

  //Modify the tabs of android display position! start$ionicConfigProvider.platform.ios.tabs.style('standard');
$ionicConfigProvider.platform.ios.tabs.position('bottom');
$ionicConfigProvider.platform.android.tabs.style('standard');
$ionicConfigProvider.platform.android.tabs.position('standard'); $ionicConfigProvider.platform.ios.navBar.alignTitle('center');
$ionicConfigProvider.platform.android.navBar.alignTitle('left'); $ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
$ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back'); $ionicConfigProvider.platform.ios.views.transition('ios');
$ionicConfigProvider.platform.android.views.transition('android');
//Modify the tabs of android display position! end // Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js $stateProvider // setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
}) // Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
}) .state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
}) .state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
}); // if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash'); });

2.修改Android的title样式居中显示

给指令ion-header-bar设置align-title="center"属性就行了 //设置默认返回按钮的文字

$ionicConfigProvider.backButton.previousTitleText(false).text('返回');
// 设置全局 $http 超时
$httpProvider.interceptors.push('timeoutHttpIntercept');
// 配置选项卡,让tab在iOS和Android都显示在底部
$ionicConfigProvider.tabs.position('bottom');
$ionicConfigProvider.tabs.style('standard');
//让nav标题在iOS和Android上都居中显示
$ionicConfigProvider.navBar.alignTitle('center');

ionic默认样式android和ios差异的更多相关文章

  1. ionic默认样式android和ios的一些不同(当时真是纠结啊~)

    当时测试的时候看到android和ios上有那么大差别,特别崩溃啊... 还好看到了这篇文章,文章原文是Ionicchina中文网上的:http://ionichina.com/topic/54e45 ...

  2. ios html5 网页取消默认样式

    ios的的默认样式修改成扁平化的样式 重要的一句css  -webkit-appearance: none;  将样式清除 单数会出现将raido的选择按钮也会消失 所以需要对radio的样式进行重新 ...

  3. Android使用默认样式创建View的几个姿势

    以下内容是分析安卓源码所得: 1: 使用默认样式创建View的方式, 源码文件 Button.Java  注:此文参考http://www.linzenews.com/ 中的内容所写,如侵删! 2: ...

  4. 通过微信Android和iOS版,看两大系统的差异

    由于设计师或者产品经理使用的移动设备大部分是iPhone,所以在做设计时,容易忽略Android和iOS的差异,按照自己的使用习惯进行设计,导致大部分设计师或产品经理做出的设计都是基于iOS规范或习惯 ...

  5. Android UI 统一修改Button控件的样式,以及其它系统控件的默认样式

    先介绍下修改原理:首先打开位于android.widget包下面的Button.java文件,这里有一句关键的代码如下: public Button(Context context, Attribut ...

  6. 如何更改 iOS 和安卓浏览器上的 input[type="radio"] 元素的默认样式?

    Safari 上的默认样式是这样的, 背景颜色可以使用background-color改变,但中间那个点始终无法去掉. 我查了一些jQuery插件,如iCheck.js,但是那说明写得我都看不明白,根 ...

  7. ionic actionsheet在android下的样式问题

    https://forum.ionicframework.com/t/actionsheets-android-ugly-styling-need-help/18462/10 想要修改ionic的样式 ...

  8. Android &Swift iOS开发:语言与框架对比

    转载自:http://www.infoq.com/cn/articles/from-android-to-swift-ios?utm_campaign=rightbar_v2&utm_sour ...

  9. Mac下安装ionic和cordova,并生成iOS项目

    为了开发HTML5,除了最新使用React Native等之外,目前首选的为稳定的ionic+Angularjs来开发iOS和android. Ionic(ionicframework一款接近原生的H ...

随机推荐

  1. Linux 下源码包安装MariaDB

    .8.5]# cd cmake-2.8.5 [root@zabbix_server cmake-2.8.5]# ./bootstrap [root@zabbix_server cmake-2.8.5] ...

  2. tyvj 1056 能量项链 区间dp (很神)

    P1056 能量项链 时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景 NOIP2006 提高组 第一道 描述     在Mars星球上,每个Mars人都随身佩 ...

  3. 拥抱ARM妹纸第二季 之 第一次 点亮太阳

    上次做鱼缸LED灯时还有很多材料正好拿来用.穆等等哥- 俺去找材料. 材料列表     3W LED   x  3     散热片     x  1     恒流IC     x  1     其他零 ...

  4. Vim中安装delimitMate,auto-pairs插件不能输入中文问题

    在安装了delimitMate插件之后发现不能正常使用中文输入了,输入法系统是ibus. 解决办法是在ibus的设置中的“在应用程序中使用内嵌编辑模式”这一项去除就可以正常输入中文了,看来可能是ibu ...

  5. Java - byte[] 和 String互相转换

    通过用例学习Java中的byte数组和String互相转换,这种转换可能在很多情况需要,比如IO操作,生成加密hash码等等. 除非觉得必要,否则不要将它们互相转换,他们分别代表了不同的数据,专门服务 ...

  6. 程序员的自我修养九Windows下的动态链接

    9.1 DLL简介 DLL即动态链接库的缩写,它相对于Linux下的共享对象. Windows下的DLL文件和EXE文件实际上是一个概念,它们都是有PE格式的二进制文件. 微软希望通过DLL机制加强软 ...

  7. wireshark抓包看ECN

    由于实验需要,要统计ECN信息.为了验证拓扑中是否真的有ECN信息,用了wireshark进行抓包查看. 网上找到的相关有用资料有:http://blog.csdn.net/u011414200/ar ...

  8. 使用IntelliJ IDEA的小技巧快乐编程(1)

    前言 我很喜欢和别人讨论一些问题,有时候,在公司里,讨论这样的问题需要演示代码.常常会碰到的一种情况是(根据我的记忆这半年多来至少超过了10次),别人会打断你的演示,抛出一个问题:等等,你刚才的操作是 ...

  9. ELK部署详解--logstash

    logstash.yml # Settings file in YAML## Settings can be specified either in hierarchical form, e.g.:# ...

  10. 03:open-falcon报警定制

    1.1 配置报警 11111111111111111111