标签:
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"属性就行了
标签:
原文地址:http://www.cnblogs.com/peakblog/p/4924676.html